Блог

Главная - Вопросы по программированию - Как контролировать, когда активируется @keyframes?

Как контролировать, когда активируется @keyframes?

#javascript #html #css #css-animations

#javascript #HTML #css #css-анимация

Вопрос:

Я хотел использовать @keyframes, поэтому я сделал это:

 div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: action 5s infinite;
}

@keyframes action {
  0%   {top: 0px;}
  25%  {top: 200px;}
  75%  {top: 50px}
  100% {top: 100px;}
}

Однако этот код выполняется при загрузке страницы. Есть ли способ запускать @keyframes в определенное время с помощью js? например.

 for (var i = 0; i < 10; i  ) {
    //Do something
}
//Activate @keyframes

Спасибо!

Комментарии:

1. Используйте animation-delay свойство.

2. Может быть, вы могли бы попробовать animation-play-state ? Вы могли бы установить его как приостановленный в CSS и переключить его в своем JS-коде?

3. @PrimeBeat как бы вы это сделали?

4. @mm4096 Я опубликовал это в качестве ответа ниже

Ответ №1:

В CSS:

 div {
  // your div code
  animation-play-state: paused;
}

В JS:

 // do some stuff after the page loads (give your div an ID)
document.getElementById("myDiv").style.animationPlayState = "running";

Ответ №2:

Вы можете разделить определение анимации на другой класс css и запустить его программно. Во-первых, добавьте класс в свой div, например:

 <div class="test">
</div>

Создайте другой класс css, в котором вы определяете анимацию:

 div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
}

.animate{
   animation: action 5s infinite;
}

@keyframes action {
  0%   {top: 0px;}
  25%  {top: 200px;}
  75%  {top: 50px}
  100% {top: 100px;}
}

Добавьте этот класс в список классов элементов div, когда найдете его правильным:

 for (let i = 0; i < 10; i  ) {
    //
}
document.querySelector('.test').classList.add('animate');

Ответ №3:

Если вы хотите запустить анимацию с помощью Javascript, вам просто нужно установить анимацию элемента.

 div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
}

@keyframes action {
  0%   {top: 0px;}
  25%  {top: 200px;}
  75%  {top: 50px}
  100% {top: 100px;}
}
 
 document.getElementByID('your-Elem').style.animation="action 5s infinite";

Итак, в вашем случае я бы сказал, дайте элементу идентификатор (или просто выберите все divs, если это то, что вы ищете), а затем запустите эту строку в цикле for .

Ответ №4:

Как насчет этого?
Этот div запускает анимацию через 3 секунды после загрузки документа.

 .animation {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: action 5s infinite;
  animation-delay: 3s;
}

@keyframes action {
  0%   {top: 0px;}
  25%  {top: 200px;}
  75%  {top: 50px}
  100% {top: 100px;}
} 
 <div class="animation"></div>

Ответ №5:

Если вы хотите запустить анимацию после определенной задержки, например, через 5 секунд после загрузки, вы можете легко использовать свойство animation-delay

Если вам нужно что-нибудь еще, вам, вероятно, потребуется использовать javascript. Просто добавьте класс, содержащий анимацию, в соответствии с:

     document.getElementsByTagName("div")[0].classList.add("animationClassName")

В этой статье о csstricks содержится более подробная информация по теме, а также советы по более сложному управлению анимацией.

Метки: ,