An Javascript if statement for a keyframes in CSS?

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.

Source: Ask Javascript Questions

LEAVE A COMMENT