A Javascript if statement for a keyframes in CSS?

Question

I've been searching all over the internet but couldn't find an answer to this.

Basically, I want to make an if statement in javascript... Once a keyframes animation in CSS3 gets to 100%, do some action. I just don't know what syntax to use.

I really appreciate any help you can provide.

CSS3:

@keyframes progress-animation{
0%{
    width: 0%;
}

100%{
    width: 100%;
}
}

@keyframes loader {
0% {
  transform: rotate(0deg);
}

25% {
  transform: rotate(180deg);
}

50% {
  transform: rotate(180deg);
}

75% {
  transform: rotate(360deg);
}

100% {
  transform: rotate(360deg);
}

}

What I want to do (in words):

if (progress-animation == '100%')
    stop animation (loader)

Sorry if it's a quite simple answer; I'm a bit new to Javascript.

Take a look at animationend event. w3schools.com/jsref/event_animationend.asp — Cybershadow
– Cybershadow, Commented May 16, 2021 at 23:22
There should be no need to stop the animation really. Perhaps you can add the CSS this progress-animation is living in? It should stop once it reaches 100% of the duration you have set, unless you have it set to infinte. — dale landry
– dale landry, Commented May 16, 2021 at 23:24
Hey sorry, there was a typo, I meant to stop another keyframes animation, not the same one. Just updated, Thanks! — CobaltX
– CobaltX, Commented May 16, 2021 at 23:50

Cybershadow · Accepted Answer · 2021-05-16 23:44:10Z

3

You can utilize animationend event.

You can also add a condition using animationName parameter received from the event to only check for particular animations.

Here's a demo:

const element = document.querySelector('.progress')
element.addEventListener("animationend", onAnimationComplete);

function onAnimationComplete(e){
  if(e.animationName==='progress-animation'){
     console.log("progress-animation ended")
  }
}

.progress{
  background:red;
  padding:10px;
  width:100px;
  border:solid 1px black;
  border-radius:16px;
  animation: progress-animation linear 3s;
}
@keyframes progress-animation{
  0%{
  width:0px;
  }
  100%{
   width:100px;
 }
}

<div class='progress'>

</div>

answered May 16, 2021 at 23:44

Cybershadow

1,21211 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

StarshipladDev · Accepted Answer · 2021-05-16 23:24:59Z

0

Using This guide

you could use something like the below:

let style = document.getElementById('WhateverElementIsCalled').style;
if(style[progress-animation] === '100%') {
    //Do a thing
}

answered May 16, 2021 at 23:24

StarshipladDev

1,1436 silver badges17 bronze badges

Collectives™ on Stack Overflow

A Javascript if statement for a keyframes in CSS?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related