Анимация

@keyframes

@keyframes устанавливает ключевые кадры при анимации элемента. Ключевой кадр это свойства элемента (прозрачность, цвет, положение и др.), которые должны применяться к элементу в заданный момент времени.

animation

Универсальное свойство, которое задаёт сразу несколько параметров анимации.

animation-delay

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

animation-direction

Устанавливает направление движения анимации.

animation-duration

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

animation-fill-mode

Определяет, какие стили должны применяться к элементу, когда анимация не проигрывается. Например, после её завершения или при остановке

animation-iteration-count

Устанавливает, сколько раз должен проигрываться анимационный цикл до остановки.

animation-name

Устанавливает одну или несколько анимаций, которые применяются к элементу.

animation-play-state

Свойство определяет, проигрывать анимацию или поставить её на паузу.

animation-timing-function

Устанавливает, по какой зависимости должна происходить анимация каждого цикла.

transition

Универсальное свойство, которое определяет эффект перехода между двумя состояниями элемента, они могут быть установлены с помощью псевдокласса :hover или :active, а также динамически через JavaScript.