Свойство CSS Animation

animation-name

Задает имя анимации. Каждое имя используется для выбора ключевого кадра в правиле, которое предоставляет значения свойств для анимации. Если имя не соответствует ни одному ключевому кадру в правиле, нет свойств для анимации, отсутствует имя анимации, анимация не будет выполняться.

div {
width: 150px;
height: 150px;
position: absolute;
animation-name: square;
}
@keyframes square {
0% {
left: 0;
}
100% {
left: calc(100% - 150px);
}
}

animation-duration

Задаёт время в секундах или миллисекундах, сколько должна длиться анимация

0s 0s, это означает, что никакой анимации нет 500ms Одна итерация анимации осуществится в течении 0.5 секунды 5s Одна итерация анимации осуществится в течении 5s секунды 10s Одна итерация анимации осуществится в течении 10s секунды

Значение по умолчанию. Отслеживает значения всех свойств

div {
width: 150px;
height: 150px;
position: absolute;
animation-name: square;
animation-iteration-count: infinite;
animation-duration: 0s;
}
@keyframes square {
0% { left: 0; }
100% { left: calc(100% - 150px); }
}

animation-timing-function

Свойство описывает, как будет развиваться анимация между каждой парой ключевых кадров. Во время задержки анимации временные функции не применяются

ease Анимация начинается медленно, разгоняется быстро и замедляется в конце ease-in Анимация начинается медленно, а затем плавно ускоряется в конце ease-out Анимация начинается быстро и плавно замедляется в конце ease-in-out Анимация медленно начинается и медленно заканчивается linear Анимация происходит равномерно на протяжении всего времени, без колебаний в скорости steps(3) Позволяет разбить анимацию на чёткое количество шагов cubic-bezier (0.1, 0.4, 0.8, 0.1) Позволяет вручную установить значения (положительные и отрицательные) для кривой ускорения и создать свою собственную анимацию

Значение по умолчанию. Переход начинается медленно, разгоняется быстро и замедляется в конце

div {
width: 150px;
height: 150px;
position: absolute;
animation-name: square;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
@keyframes square {
0% { left: 0; }
100% { left: calc(100% - 150px); }
}

animation-iteration-count

Свойство указывает, сколько раз проигрывается цикл анимации. Начальное значение 1 означает, что анимация будет воспроизводиться от начала до конца один раз. Это свойство часто используется в сочетании со значением alternate свойства animation-direction, которое заставляет анимацию воспроизводиться в обратном порядке в альтернативных циклах

1 Значение по умолчанию 1, анимация проиграится один раз 3 Анимация проиграится 3 раза infinite Анимация будет проигрываться бесконечно

Значение по умолчанию 1, анимация проигрывается один раз

div {
width: 150px;
height: 150px;
position: absolute;
animation-name: square;
animation-duration: 1s;
animation-iteration-count: 1;
}
@keyframes square {
0% { left: 0; }
100% { left: calc(100% - 150px); }
}

animation-direction

Устанавливает направление и тип проигрывания анимации

normal Анимация идёт с самого начала, после завершения цикла возвращается к исходному состоянию alternate Анимация идёт с начала до конца, затем плавно возвращается в исходное положение reverse Анимация идёт с конца цикла, после его завершения возвращается к исходному состоянию alternate-reverse Анимация идёт с конца до начала, затем плавно возвращается в исходное положение

Значение по умолчанию 0s запускает анимацию без задержки

div {
width: 150px;
height: 150px;
position: absolute;
animation-name: square;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: normal;
}
@keyframes square {
0% { left: 0; }
100% { left: calc(100% - 150px); }
}

animation-fill-mode

Позволяет управлять обьектом при завершении анимации

none К элементу не применяются какие-либо стили. forwards К элементу по окончанию анимации применяется стиль последнего ключевого кадра. Каким будет этот кадр в последовательности анимации зависит от комбинации значений свойств animation-direction и animation-iteration-count backwards К элементу применяется стиль первого ключевого кадра и он остаётся на протяжении периода заданного animation-delay. Первый ключевой кадр определяется на основании значения animation-direction both К элементу применяются оба правила, как для forwards, так и для backwards.

Значение по умолчанию 0s запускает анимацию без задержки

div {
width: 150px;
height: 150px;
position: absolute;
animation-name: square;
animation-duration: 2s;
animation-iteration-count: 1;
animation-fill-mode: none
}
@keyframes square {
0% { left: 0; }
100% { left: calc(100% - 150px); }
}

animation-delay

Устанавливает время задержки перед запуском анимации. Значение 0s запускает анимацию сразу же.

0s Значение по умолчанию 0s запускает анимацию без задержки 500ms Анмация запустится через 0.5 секунды 2s Анмация запустится через 2 секунды

Значение по умолчанию 0s запускает анимацию без задержки

div {
width: 150px;
height: 150px;
position: absolute;
animation-name: square;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-delay: 0s;
}
@keyframes square {
0% { left: 0; }
100% { left: calc(100% - 150px); }
}

animation-play-state

Позволяет запускать или останавливать анимацию по событию

running Значение по умолчанию. Проигрывать анимацию paused Поставить анимацию на паузу

Значение по умолчанию. Проигрывать анимацию

div {
width: 150px;
height: 150px;
position: absolute;
animation-name: square;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-play-state: running;
}
@keyframes square {
0% { left: 0; }
100% { left: calc(100% - 150px); }
}