Определение анимации
Некоторые свойства CSS можно анимировать, то есть их можно использовать в анимации и переходах.
Анимируемые свойства могут постепенно изменяться от одного значения к другому, например размер, числа, процентное соотношение и цвет.
Поддержка браузера анимации
Числа в таблице относятся к первой версии браузера, полностью поддерживающей анимацию CSS.
Числа, за которыми следуют -webkit-, -moz- или -o-, указывают на первую версию, которая работала с префиксом.
| 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
Пример
Анимируйте цвет фона с красного на синий:
/* Код для старых Chrome, Safari и Opera */
@-webkit-keyframes mymove
{
from {background-color: red;}
to {background-color: blue;}
}
/* Стандартный синтаксис */
@keyframes mymove
{
from {background-color: red;}
to {background-color: blue;}
}
Попробуйте сами »
Свойства анимации
Эти свойства можно анимировать в CSS: