CSS свойство @keyframes

Правило @keyframes устанавливает ключевые кадры при анимации элемента.

Ключевой кадр это свойства элемента (прозрачность, цвет, положение и др.), которые должны применяться к нему в заданный момент времени. Таким образом, анимация представляет собой плавный переход стилевых свойств от одного ключевого кадра к другому. Вычисление промежуточных значений между такими кадрами берёт на себя браузер.

Самый простой вариант, когда есть только два ключевых кадра - исходное и конечное состояние. Например:


@keyframes box {
    from { left: 0; }
    to { left: 300px; }
}

Здесь набор ключевых кадров имеет имя box, которое в последствии будет использовано в свойстве animation. В наборе определяется, что элемент будет изменять значение свойства left от 0 до 300 пикселей. Вместо ключевых слов from и to можно использовать, соответственно, 0% и 100%.

Ключевые кадры не обязательно должны начинаться с 0% и заканчиваться 100%. В этом случае анимация будет происходить не сразу.

CSS синтаксис

@keyframes переменная {селектор-ключевого-кадра {css-стили;}}

Возможные значения

ЗначениеОписание
переменнаяОбязательный параметр. Определяет название анимации, которая связывает @keyframes со свойством animation, настраивающим время анимации и другие её параметры.
селектор-ключевого-кадра

Обязательный параметр. Определяет процент от продолжительности анимации.

Допустимые значения:

0-100%
from (то же, что и 0%)
to (то же, что и 100%)

Вы можете указывать множество селекторов ключевого кадра в одной анимации.

css-стилиОбязательный параметр. Один или более допустимых свойств CSS стилей.

Пример использования

Заставим элемент понемногу сдвигаться вниз на 200px


/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
     from {top: 0px;}
     to {top: 200px;}
} 

/* Стандартный синтаксис */ 
@keyframes mymove {
     from {top: 0px;}
     to {top: 200px;}
}