0

I wanted to use @keyframes, so I did this:

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;}
}

However, this code runs when the page loads. Is there a way to trigger the @keyframes at a certain time with js? eg.

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

Thanks!

4
  • 1
    Use animation-delay property. Commented Dec 2, 2021 at 6:56
  • You could try animation-play-state maybe? You could set it as paused in the CSS and toggle it in your JS code?
    – PrimeBeat
    Commented Dec 2, 2021 at 7:01
  • @PrimeBeat how would you do that?
    – mm4096
    Commented Dec 2, 2021 at 7:03
  • @mm4096 I posted it as an answer below
    – PrimeBeat
    Commented Dec 2, 2021 at 7:10

5 Answers 5

2

In CSS:

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

In JS:

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

You can separate animation definition to another css class and trigger it programmatically. Firstly, add class to your div e.g.:

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

Create another css class where you define the animation:

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;}
}

Add this class to div element classList when you find it right:

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

If you want to trigger the animation using Javascript you just need to set the animation of the element.

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";

So in your case, I'd say give the element an ID (or just select all divs if thats what you're going for) and then run this line in your for loop.

0

How about this?
This div starts animation 3s after document loaded.

.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>

0

If you want to start the animation after a certain delay, such as 5s after load, you can easily use the animation-delay property

If you need anything else you'll probably need to use javascript. Just add a class containing the animation, along the lines of:

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

This article on csstricks provides more details on the topic as well as tips for more complex control over the animation.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.