Использование CSS-анимации (Eng)

Использование CSS-анимации (Eng)

Анимации CSS позволяют анимировать переходы от одной конфигурации стиля CSS к другой. Анимация состоит из двух компонентов: стиля, описывающего анимацию CSS, и набора ключевых кадров, указывающих начальное и конечное состояния стиля анимации, а также возможные промежуточные путевые точки.
animation-delay

animation-delay

CSS свойство animation-delay определяет время задержки перед стартом анимации.
animation-fill-mode

animation-fill-mode

The animation-fill-mode Свойство CSS определяет, как анимация CSS применяет стили к своей цели до и после ее выполнения.
animation-direction

animation-direction

The animation-direction Свойство CSS задает, должна ли анимация воспроизводиться вперед, назад или чередоваться вперед и назад между воспроизведением последовательности вперед и назад.
animation-timing-function

animation-timing-function

The animation-timing-function Свойство CSS задает, как анимация продвигается по продолжительности каждого цикла.
Использование CSS переходов

Использование CSS переходов

CSS transitions предоставляют способ контролировать скорость анимации, при изменении CSS-свойств
Использование CSS-анимации (ru)

Использование CSS-анимации (ru)

CSS-анимации позволяют анимировать переходы от одной конфигурации CSS стилей к другой. CSS-анимации состоят из двух компонентов: стилевое описание анимации и набор ключевых кадров, определяющих начальное, конечное и, возможно, промежуточное состояние анимируемых стилей.
Как запускать CSS-анимацию при прокрутке страницы

Как запускать CSS-анимацию при прокрутке страницы

В этом пошаговом руководстве будет рассмотрено создание CSS-анимации с нуля и её включение при скролле (прокрутке вверх-вниз) страницы, когда HTML-элемент находится в поле зрения – видимой части окна, с помощью Intersection Observer API.