Анимация

Обновлено: 30.05.2022

Анимация

Свойства, задающие движение элементов на веб-странице или анимационный переход из одного состояния в другое.

  • @keyframes

    @keyframes

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

  • animation

    animation

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

  • animation-delay

    animation-delay

    Свойство animation-delay устанавливает время ожидания перед запуском цикла анимации. Значение 0s или 0ms запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации.

  • animation-direction

    animation-direction

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

  • animation-duration

    animation-duration

    Задаёт время в секундах или миллисекундах, сколько должен длиться один цикл анимации. По умолчанию значение равно 0s, это означает, что никакой анимации нет.

  • animation-fill-mode

    animation-fill-mode

    Определяет, какие стили должны применяться к элементу, когда анимация не проигрывается. Например, после её завершения или при остановке. По умолчанию, в момент окончания анимации стиль элемента возвращается к исходному, свойство animation-fill-mode позволяет изменить это поведение и сделать так, чтобы стиль элемента оставался как у последнего ключевого кадра.

  • animation-iteration-count

    animation-iteration-count

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

  • animation-name

    animation-name

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

  • animation-play-state

    animation-play-state

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

  • animation-timing-function

    animation-timing-function

    Устанавливает, согласно какой функции времени должна происходить анимация каждого цикла между ключевыми кадрами. Она представляет собой математическую функцию, показывающую, как быстро по времени меняется значение свойства. Начальная точка имеет координаты 0.0, 0.0, конечная — 1.0, 1.0, при этом функция по оси ординат может превышать эти значения в большую или меньшую сторону (рис. 1).

  • transition

    transition

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

  • transition-delay

    transition-delay

    Свойство transition-delay устанавливает время ожидания перед запуском эффекта перехода. Значение 0s запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации.

  • transition-duration

    transition-duration

    Задаёт время в секундах или миллисекундах, сколько должна длиться анимация перехода до её завершения. По умолчанию значение равно 0s, это означает, что никакой анимации нет, переход происходит мгновенно.

  • transition-property

    transition-property

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

  • transition-timing-function

    transition-timing-function

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