CSS Анимации
Определение и использование
Некоторые свойства 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- |
Пример
Анимация background-color для красного до синего:
/* Код для старых 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:
