Правило @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.
Свойство transition-delay устанавливает время ожидания перед запуском эффекта анимации перехода.
Свойство transition-duration задаёт время в секундах или миллисекундах, сколько должна длиться анимация перехода до её завершения.
Свойство transition-property устанавливает имя стилевого свойства, значение которого будет отслеживаться для создания эффекта перехода.
Свойство transition-timing-function устанавливает, насколько быстро должно изменяться значение стилевого свойства для которого применяется эффект перехода.