Как сохранить конечное состояние анимации CSS3 неизменным

введение

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

Способ 1. Используйте атрибут animation-fill-mode

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

значение атрибута

Пример

 .element {
  анимация: упрощение myAnimation 2s;
  режим анимации-заполнения: вперед;
}
@keyframes myAnimation {
  0% {
    преобразование: TranslateX (0);
  }
  100% {
    преобразование: TranslateX (100 пикселей);
  }
}

В этом примере элемент .element останется в состоянии transform: translateX(100px) после завершения анимации.

Способ 2. Используйте событие animationend

Прослушивая событие animationend через JavaScript, вы можете вручную установить стиль элемента, когда анимация заканчивается, тем самым сохраняя конечное состояние анимации.

Пример

 <div class="element"></div>

 .element {
  ширина: 100 пикселей;
  высота: 100 пикселей;
  цвет фона: красный;
  анимация: упрощение myAnimation 2s;
}
@keyframes myAnimation {
  0% {
    преобразование: TranslateX (0);
  }
  100% {
    преобразование: TranslateX (100 пикселей);
  }
}

 const element = document.querySelector('.element');
element.addEventListener('animationend', () => {
  element.style.transform = 'translateX(100px)';
});

В этом примере, когда анимация заканчивается, код JavaScript устанавливает для свойства transform элемента значение translateX(100px) , тем самым сохраняя конечное состояние анимации.

Способ 3. Используйте атрибут transition

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

Пример

 <div class="element"></div>

 .element {
  ширина: 100 пикселей;
  высота: 100 пикселей;
  цвет фона: красный;
  переход: преобразование 2s легкость-в-выход;
}
.element.animate {
  преобразование: TranslateX (100 пикселей);
}

 const element = document.querySelector('.element');
element.classList.add('анимировать');

В этом примере при добавлении класса animate свойство transform элемента переходит из исходного состояния в translateX(100px) и остается в этом состоянии после завершения перехода.

Подвести итог

Сохранения конечного состояния анимации CSS3 неизменным можно добиться различными способами, включая использование свойства animation-fill-mode , прослушивание события animationend и использование свойства transition . Каждый метод имеет свои применимые сценарии, и разработчики могут выбрать подходящий метод в соответствии с конкретными потребностями.

Я надеюсь, что эта статья предоставит вам четкое понимание и практические рекомендации, которые помогут вам лучше применять анимацию CSS3 в реальной разработке и достигать необходимых динамических эффектов.

На этом завершается статья о том, как сохранить неизменным конечное состояние CSS3-анимации. Для получения дополнительной информации о сохранении неизменным конечного состояния CSS3-анимации обратитесь к предыдущим статьям на сайте downcodes.com или продолжайте просматривать соответствующие статьи ниже. сделайте это в будущем. Поддержите downcodes.com!