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!
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";
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');
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.
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>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.
animation-delayproperty.animation-play-statemaybe? You could set it as paused in the CSS and toggle it in your JS code?