First Code

Курсы программирования

Свойство 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

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

Значение по умолчанию. Отслеживает значения всех свойств
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

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

Значение по умолчанию. Переход начинается медленно, разгоняется быстро и замедляется в конце
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, анимация проигрывается один раз
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

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

Значение по умолчанию 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

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

Значение по умолчанию 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 запускает анимацию без задержки
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

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

Значение по умолчанию. Проигрывать анимацию
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); }
}