Вдосконалюйте сайти за допомогою CSS3-анімації
Примітка: дивитися потрібно у Firefox'і, Safari або Chrome'і.
У цій статті є введення в CSS3-анімацію та пояснення наведеного синтаксису. Потім ми розглянемо просунуте застосування анімації CSS перед тим, як закінчити статтю приведенням кількох реальних ідей того, як можна використати її у своїх сайтах прямо зараз.
Практичний курс з верстки адаптивного сайту з нуля!
Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3
Що таке CSS3 Animations?
Модуль CSS3 Animations складається з рядів різних візуальних станів елемента, що приймаються по черзі. Щоб визначити кожен із цих станів, через інтервали встановлюється деяка кількістьключових кадрів протягом усієї анімації. Ці інтервали визначаються за допомогою відсоткового відношення, і кожен із них представляє один або більше стилів CSS. Потім анімація повинна бути приєднана до елемента та різних опцій щодо того, як можна встановити програвання анімації.
Приклад: Базова анімація ключових кадрів
На прикладі внизу можна побачити, що ми визначили три різні стани елемента, що приймаються на різних стадіях анімації. Ми призначили йому ідентифікатор colors.
Примітка: у робочому проекті W3C ідентифікатор анімації міститься в одинарних лапках. Схоже, що Firefox'у це не подобається, і він працює лише з лапками. Webkit працює як з лапками, так і з їхньою відсутністю.
Все, що потрібно зробити для запуску анімації – це застосувати до анімованого елемента стиль CSS animation-name. У цьому прикладі ми застосували елемент анімацію 'colours'. Таким чином, ми змусимо фон своєї веб-сторінки повільно змінювати колір від червоного до зеленого та синього.Анімація йде в комплекті з рядом установок за замовчуванням і для їх скасування ми встановили animation-timing-function (стиль переходу - наприклад, ease-in або дивіться користувацькі кубічні криві функції часу Безье (Bezier)), animation-iteration-count (кількість раз повторення) та animation-duration (тривалість анімації).
Стилі анімації можна, крім того, записати стенографією, застосовуючи лише animation, за якою слідує список властивостей. Для більш повного пояснення різних властивостей анімації CSS3 дивіться проект W3C.
Примітка: наведений вище приклад не буде працювати, якщо ви просто скопіюєте та вставите стилі. Анімація CSS3 вимагає префіксів для браузерів. Ці вилучення з прикладу було зроблено просто ясності. –webkit – слід розмістити перед стилями Chrome/Safari, а –moz – має стояти перед стилями Firefox. Це трохи дратує, тому що означає, що анімацію потрібно, по суті, визначати двічі (або тричі, якщо ви бажаєте передбачити не схильну до старіння в майбутньому версію без будь-яких префіксів).
Пірнаємо, окресливши голову…
Madmanimation від Енді Кларка (Andy Clark) - фантастичний приклад того, наскільки просунуто може застосовуватися анімація CSS3 при створенні справжнього маленького фільму. Якщо взяти найбільш загальне уявлення, вона, в основному, працює шляхом присвоєння кожної анімації до елемента класу .go, доданим до селектора CSS. Наприклад: