Как воспроизводить и приостанавливать анимацию CSS с помощью пользовательских свойств CSS?

В этой статье мы увидим, как управлять анимацией CSS с помощью пользовательских свойств, а также узнаем их реализацию на примерах.

Анимации CSS — это автоматические переходы, которые можно выполнять на веб-странице, что позволяет элементу переходить из одного стиля в другой. Пользовательские свойства CSS — это переменные, определенные разработчиками CSS, которые содержат определенные значения для повторного использования в документе. Они устанавливаются с использованием нотации пользовательских свойств, и доступ к ним осуществляется с помощью функции var() .

Например, –main-by-color – это настраиваемое свойство, которое распространяется на всю веб-страницу ( :root ) и доступно как var(–main-bg-color, red), где второй аргумент является значением по умолчанию.

:root {
 --main-bg-color : green;
}
div {
background-color : var(--main-bg-color,red)
}

Добавление CSS-анимации с использованием пользовательских свойств. Для первоначального воспроизведения CSS-анимации нам нужно добавить анимацию с помощью правила @keyframes . Но мы добавим анимацию с настраиваемыми свойствами. Анимация начинает воспроизводиться, как только она встроена в элемент

Мы поймем вышеприведенные концепции на примерах.

Пример 1. В приведенном ниже примере кода мы создадим простую анимацию слайда. мы добавляем --animn , --animdur , --animps в качестве настраиваемых свойств для animation-name , animation-duration , animation-play-state соответственно. бесконечен как количество итераций, 3 с как продолжительность и чередуется как направление анимации.

Вывод: поле цвета помидора скользит после того, как мы добавили анимацию, как показано в коде выше. Теперь вы можете переключать ту же анимацию, используя пользовательские свойства и псевдокласс :checked.

Переключение (воспроизведение/пауза) анимации CSS: мы можем переключать анимацию двумя способами:

• Изменяя продолжительность анимации
• Используя анимацию-воспроизведение-состояние

Мы поймем оба подхода к последовательному переключению анимации CSS и узнаем их реализацию на примерах.

Изменяя продолжительность анимации: в этом методе вы просто меняете значение анимации на ноль, чтобы приостановить, и некоторое положительное значение для воспроизведения.

Подход: для изменения продолжительности анимации будет использоваться следующий подход:

• Создайте элемент <div> и стилизуйте его с помощью CSS
• Выберите <div> и добавьте свойство анимации с длительностью 0 с через пользовательскую переменную (animation-duration).
• Создайте анимацию, как показано в примере ниже.
• Добавьте переключатель в документ
• Добавьте псевдокласс :checked к переключателю и добавьте свойство, в котором вы меняете пользовательскую переменную с 0 на некоторое положительное значение.
• Теперь вы можете переключать анимацию с помощью переключателя.

Пример 2: В этом примере (аналогично приведенному выше) мы использовали псевдокласс :checked для переключения анимации. Кроме того, мы меняем параметр –animdur с 0 на 3 , чтобы переключать скольжение элемента.

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

С помощью animation-play-state: вы можете использовать свойство CSS animation-play-state для переключения между состояниями анимации.

Подход : следующий подход будет использоваться для состояния воспроизведения анимации:

• Создайте элемент <div/> и стилизуйте его с помощью CSS
• Выберите <div/> и добавьте свойство анимации с состоянием паузы через пользовательскую переменную (анимация-воспроизведение-состояние).
• Создайте анимацию, как показано в примере ниже.
• Добавьте переключатель в документ
• Добавьте псевдокласс :checked к переключателю и с его помощью добавьте свойство, в котором вы меняете пользовательскую переменную с приостановленной на работающую.
• Теперь вы можете переключать анимацию с помощью переключателя.

Пример 3: В этом примере (таком же, как и выше) мы использовали псевдокласс :checked для переключения анимации. –animps — это важное пользовательское свойство, которое принимает два значения [paused/running], которые используются для переключения анимации. При установке флажка состояние воспроизведения анимации изменяется на «Выполняется».

Выход: