CSS-правило @keyframes

CSS-правило @keyframes используется для указания промежуточных шагов в течение цикла последовательности анимации путем установления ключевых кадров.

Правило @keyframes состоит из ключевого слова @keyframes, за которым следует идентификатор, дающий имя анимации (на который будет ссылаться использование свойства animation-name), за которым следует набор правил стилей (ограниченных фигурными скобками).

Селектор ключевого кадра для правила @keyframes начинается с процента (%) или ключевых слов from (0%) или to (100%). Селектор используется для указания в какой момент исполняется анимация определенная в animation-name.

Синтаксис

Синтаксически правило задается по следующему шаблону:

@keyframes animation-name {
    keyframes-selector {
         property: value;
    }
}

Примеры написания кода правила @keyframes:

.box {
    width: 50px;
    height: 50px;
    background: red;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: moveit;
    -webkit-animation-duration: 2s;
    /* Standard syntax */
    animation-name: moveit;
    animation-duration: 2s;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}
 
/* Standard syntax */
@keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}

Если в селекторе @keyframes указано отрицательное процентное значение или значение выше, чем 100%, то этот ключевой кадр будет игнорироваться.

Параметры

В следующей таблице описаны параметры этого правила.

Значение	Описание
Обязательно — должны быть указаны следующие параметры
`animation-name`	Имя анимации.
keyframes-selector	Определяет процент от продожительности анимации на котором анимация, определенная свойством `animation-name` стартует. Эта анимация закончится по достижении следующего `keyframe` или значения `100%`