CSS3 зараз

CSS3 і HTML5 розвиваються все швидше і швидше, браузери починають підтримувати все більше нових фішок та плюшок. У зв'язку з цим мені хотілося б зазирнути в наш майбутній рай верстальників і зробити цикл оглядових статей за новими плюшками і фішками цих технологій. У цьому циклі мені хотілося б розглянути такі властивості CSS3, якtransition,animate,opacityта модельrgba().

Використання CSS3.

Часто можна почути від багатьох веб-дизайнерів слова «Я вже не можу дочекатися, коли можна використовувати CSS3. ». А тим часом використовувати його можна вже сьогодні. Так, використання CSS3 для критичних моментів сайту зараз неможливе. Але використовувати його для додавання дрібних, некритичних для проекту деталей цілком реально можна і потрібно.

Приклад: На вашому сайті чудово виглядає зміна кольору посилання в меню при наведенні мишкою. Колір змінюється різко, без плавного переходу, але це ніяк не впливає на загальний вигляд сайту, його юзабіліті. Зате присутність плавного переходу кольору може послужити саме тією маленькою деталькою, яка додасть вашому сайту трохи життя.

У цій статті ми розглянемо CSS-властивість transition. Всі приклади наведені для движка webkit. Трохи нижче ми розглянемо кросбраузерність цих методів.

Transition

CSS Transitions allow property changes in CSS values ​​to occur smoothly over a specified duration.

CSS Transitions дозволяють призначати зміни властивостей CSS плавно протягом деякого часу.

Почнемо з найпростішого прикладу - додамо плавний перехід фону посилання. Класична реалізація:

При наведенні мишки на посилання фон змінить свій колір зі світло-синього на темно-синій, а колір шрифту - з чорного набілий. Звичайна ситуація. Тепер додамо плавну зміну фону, використовуючи CSS transitions:

Тепер наше тло плавно змінює колір протягом півсекунди! Як і з іншими властивостями CSS, ми можемо поєднати всі transition-властивості в одне:

Тепер додамо плавну зміну кольору шрифту:

Цей код при наведенні мишки плавно змінюватиме колір фону протягом півсекунди і колір шрифту протягом 0.3 секунд. Якщо нам потрібні однакові властивості всім елементів, ми можемо замінити

Тепер Transition-ефект буде застосовуватися до всіх змін, що змінюються при події, і з однаковими параметрами - 0.5 секунд, ease-ефект.

Також ми можемо додати затримку для ефекту:

Тепер наша анімація буде працювати через півсекунди після наведення мишки.

Застосовувати властивість transition можна до чого завгодно - тла, кольору, довжини, розміру шрифту і т.д. В основному це властивості, що задають колір або властивості, які можуть бути виражені в одиницях довжини (px, em, ex) або у відсотках. Як події ми можемо використовувати псевдокласи :focus і :active. Взагалі використовувати transition можна з будь-якими селекторами.

Підсумкова зведена таблиця:

transition-propertyВластивість, до якої застосовуємо анімаціюПрактично будь-яка властивість CSS: color, background, width, font-size і т.д.
transition-durationТривалість анімаціїЧас у секундах: 0.5s - півсекунди, 60s - одна хвилина і т.д.
transition-timing-functionТимчасова функція для анімаціїease, linear, ease-in-out, ease-in, ease-out, cubic-bezier
transition-delayЗатримка анімаціїЧас у секундах: 0.5s - півсекунди, 60s - однахвилина і т.д.

Chrome, Safari, Opera 10.5+, Firefox 4+У тексті статті використовувалися правила з префіксом лише для WebKit-браузерів. Не забувайте додавати у ваших проектах префікси вендорів -moz- та -o-. На сторінці-прикладі можна підглянути кросбраузерний код (без IE, само собою).

А у нас тут можна отримати грант на тестовий період Яндекс.Хмари. Варто лише у полі «секретний пароль» запровадити «Хабр»