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%

Поддержка браузеров

Правило @keyframes поддерживается во всех основных браузерах.

Читайте также

Похожие посты

CSS-свойство clip

Определяет координаты области, которая будет кадрирована, т.е. содержимое за пределом этой области будет отрезано

CSS-свойство bottom

Задает смещение или отступ от нижнего края элемента

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.