@keyframes
CSS свойство @keyframes
Поддержка браузеров
Описание
С помощью правила @keyframes можно создавать анимацию.
Анимация создается путем постепенного изменения от одного множества CSS стилей к другому.
Во время анимации можно изменять набор CSS стилей любое количество раз.
Указывайте, когда изменение произойдет в процентах или с помощью ключевых слов "from" и "to", которые означают 0% и 100% соответственно.
0% это начало анимации, 100% - это когда анимация завершена.
Для лучшей поддержки браузерами, всегда следует определять два селектора 0% и 100%.
Используйте свойства анимации для управления процессом анимации, а также для привязки анимации к селекторам.
Значения свойства
Значение | Описание |
---|---|
имя_анимации | Обязательный параметр. Определяет название анимации. |
селектор-ключевого-кадра |
Обязательный параметр. Указывается в процентах от продолжительности анимации. Допустимые значения: 0-100% from (то же, что и 0%) to (то же, что и 100%) Замечание: Вы можете указывать множество селекторов ключевого кадра в одной анимации. |
css-стили | Обязательный параметр. Один или более допустимых свойств CSS стилей. |
div{ width:100px; height:100px; background:red; position:relative; animation:mymove 4s infinite; -moz-animation:mymove 4s infinite; /* Firefox */ -webkit-animation:mymove 4s infinite; /*Safari и Chrome*/ } @keyframes mymove{ 0% {top:0px; left:0px; background:red;} 25% {top:0px; left:530px; background:blue;} 50% {top:100px; left:530px; background:yellow;} 75% {top:100px; left:0px; background:green;} 100% {top:0px; left:0px; background:red;} } @-moz-keyframes mymove{ /* Firefox */ 0% {top:0px; left:0px; background:red;} 25% {top:0px; left:530px; background:blue;} 50% {top:100px; left:530px; background:yellow;} 75% {top:100px; left:0px; background:green;} 100% {top:0px; left:0px; background:red;} } @-webkit-keyframes mymove{ /* Safari и Chrome */ 0% {top:0px; left:0px; background:red;} 25% {top:0px; left:530px; background:blue;} 50% {top:100px; left:530px; background:yellow;} 75% {top:100px; left:0px; background:green;} 100% {top:0px; left:0px; background:red;} }