CSS3 анимация в современных браузерах
CSS анимация - это плавное изменение одного и/или более свойств элемента по математической функции. Обычно анимации делаются на JS через функции setInterval и setTimeout, любители jQuery используют функцию animate, особо сложные эффекты делаются на flash, но это было раньше.
CSS анимация поддерживается современными браузерами, а на мобильных платформах их использование даже желательно так, как они меньше нагружают процессор нежели JS или flash решения.
Для создания анимации используется конструкция @keyframes и свойство animation.
@keyframes - ключевые кадры анимации
Для создания анимации необходимо сначала определить ключевые кадры анимации, то есть места в которых анимация меняет свои значения. Таких точек в анимации должно быть минимум две, начальная и конечная, рассчитываться анимация между ними будет по функции.
@keyframes moveAnimation{
from{
top: 0px;
}
to{
top: 100px;
}
}
Для задания кадров используется процентная запись, 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: paused | running
Позволяет остановить(paused) и запустить(running) анимацию.
Поддержка браузерами CSS анимаций
| IE | Firefox | Chrome | Safari | Opera | iOS Safari | Opera Mini | Android Browser | Blackberry Browser | |
|---|---|---|---|---|---|---|---|---|---|
| 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-эффекты для портфолио.
Полезно: