CSS Animatable
Определение и использование
Некоторые свойства CSS являются анимированными, что означает, что их можно использовать в анимациях и переходах.
Анимированные свойства могут постепенно меняться от одного значения к другому, например, размер, число, процент и цвет.
Поддержка браузера
Цифры в таблице указывают первую версию браузера, полностью поддерживающую анимацию CSS.
Номера следуют -webkit-, -moz-, or -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- |
Пример
Анимация фонового цвета с красного на синий:
/* Code for old Chrome, Safari and Opera */
@-webkit-keyframes mymove
{
from {background-color: red;}
to {background-color: blue;}
}
/* Standard syntax */
@keyframes mymove
{
from {background-color: red;}
to {background-color: blue;}
}
Animatable Properties
Эти свойства являются анимированными в CSS: