CODEWITHSUNDEEP
javascripthtmlcsscss-animations
mm4096
mm4096

Reputation: 161

How to control when @keyframes is activated?

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!

Upvotes: 0

Views: 353

Answers (5)

Robbie Wadley
Robbie Wadley

Reputation: 808

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.

Upvotes: 0

PrimeBeat
PrimeBeat

Reputation: 484

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

Upvotes: 2

Nouveaut
Nouveaut

Reputation: 71

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');

Upvotes: 1

ConnerWithAnE
ConnerWithAnE

Reputation: 1168

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.

Upvotes: 1

Ihor
Ihor

Reputation: 1234

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>

Upvotes: 0

Related Questions