CSS3 анімація в сучасних браузерах
CSS анімація - це плавна зміна одного та/або більше властивостей елемента з математичної функції. Зазвичай анімації робляться наJSчерез функціїsetIntervalіsetTimeout, любителіjQueryвикористовують функціюanimate, особливо складні ефекти робляться наflash, але це було раніше.
CSS анімація підтримується сучасними браузерами, а на мобільних платформах їх використання навіть бажано так, як вони менше навантажують процесор, ніж JS або flash рішення.
Для створення анімації використовується конструкція@keyframes та властивістьanimation.
@keyframes - ключові кадри анімації
Для створення анімації необхідно спочатку визначити ключові кадри анімації, тобто місця, в яких анімація змінює свої значення. Таких точок в анімації має бути мінімум дві, початкова та кінцева, розраховуватися анімація між ними буде за функцією.
Для завдання кадрів використовується відсотковий запис, 0% - початок анімації, 10% - у цей час пройде 10% анімації. Також можна використовувати ключові слова from(0%) і to(100%).
Властивість animation – присвоюємо анімацію елементу
Створивши ключові кадри, необхідно анімацію привласнити елементу, для цього використовується CSS3 властивість animation.
animation:name duration timing-function delay iteration-count direction
name - ім'я анімації береться з @keyframes. За промовчанням none.
duration – тривалість анімації. У секундах(s) або мілісекундах(ms). Типово 0.
timing-function - функція якою розраховується значення анімації між кадрами. За замовчуванням ease.
delay – затримка перед початком анімації. У секундах(s) або мілісекундах(ms). Типово 0.
iteration-count – кількістьпрогравання анімації. За замовчуванням 1.
direction – визначає рух анімації. Normal - анімація рухається тільки у прямому напрямку, alternate - анімація рухається у зворотному напрямку у парні рази програвання анімації. За промовчанням normal.
Для вказівки конкретної якості анімації можна використовувати довші версії властивостей: animation-name, animation-duration - та інші з прикладу вище думаю зрозуміло. Тільки одну властивість необхідно задавати окремо animation-play-state.
animation-play-state:розв'язаний running
Дозволяє зупинити (paused) та запустити (running) анімацію.
Підтримка браузерами CSS анімацій
| 2.1-webkit- | |||||||||
| 2.2-webkit- | |||||||||
| 3.2-webkit- | 2.3-webkit- | ||||||||
| 7.0 | 4.0-4.1-webkit- | 3.0-webkit- | |||||||
| 8.0 | 16.0 | 4.2-4.3-webkit- | 4.0-webkit- | ||||||
| 9.0 | 17.0 | 23.0-webkit- | 5.1-webkit- | 5.0-5.1-webkit- | 4.1-webkit- | ||||
| Current | 10.0 | 18.0 | 24.0-webkit- | 6.0-webkit- | 12.1 | 6.0-webkit- | 5.0-7.0 | 4.2-webkit- | 7.0-webkit- |
| Near future | 19.0 | 25.0-webkit- | 12.5 | 10.0-webkit- | |||||
| Farther future | 20.0 | 26.0-webkit- |
Для старих версій браузерів варто використовувати вендорні префікси -o-, -moz-, -webkit-.
За таблицю сумісності хочу подякувати сайту caniuse.com.
Приклад анімації
Використовувати анімації вжеможна, вони підтримуються більшістю сучасних браузерів і дозволяють багато робити, але є і мінуси.
Через велику кількість властивостей з вендорними префіксами доведеться копіювати один і той же запис 4 рази, що збільшить файл стилів, а також немає зручного керування станом анімації. Найбільш вдале застосування css анімацій – hover-ефекти для портфоліо.