triggering CSS animation with JavaScript not working

Question

I want to trigger a CSS animation using javascript. The problem is I want to initiate the animation after 3 seconds but, the animation starts with no delay!

why? I pause the animation at the beginning by adding paused class... but it doesn't work..!?

//pause the animation at first
document.getElementById("tutorialText").classList.add("paused");

//after 3 seconds initiate the animation
setTimeout(function(){
  document.getElementById("tutorialText").classList.add("played");
}, 3000)

@font-face {
  font-family: "Open Sans";
  src: url(fonts/OpenSans-Bold.ttf) format("truetype");
  font-weight: bold;
}


html{
	overflow:hidden;
}

 
.mainTexts{
	position: absolute;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-size: 7.5vw;
    color: rgb(242, 242, 242);
    left: 18.5vw;
    top: -45vh;
    animation: roll 1s linear infinite;
}



@-webkit-keyframes roll {
  0% {
    top: -50vh;
  }
  100% {
    top: 12.369791666666666vh;
  }
}

.paused {
   -webkit-animation-play-state: paused !important; 
}

.played {
   -webkit-animation-play-state: running !important; 
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css"> 
</head>

<body>
<div class="mainTexts">
 <p id="tutorialText">Tutorial</p>
</div>
  <script src="script.js"></script>
</body>

</html>

What I'm missing?

Jorge Fuentes González · Accepted Answer · 2019-11-26 19:56:21Z

Because the animation property is set to the mainTexts class, not to the tutorialText element. Just target the element which holds the animation property.

Also, remove the -webkit- thingy. Is not needed anymore.

//pause the animation at first
document.getElementById("tutorialText").classList.add("paused");

//after 3 seconds initiate the animation
setTimeout(function(){
  document.getElementById("tutorialText").classList.add("played");
}, 3000)

@font-face {
  font-family: "Open Sans";
  src: url(fonts/OpenSans-Bold.ttf) format("truetype");
  font-weight: bold;
}


html{
	overflow:hidden;
}

 
.mainTexts{
	position: absolute;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-size: 7.5vw;
    color: rgb(242, 242, 242);
    left: 18.5vw;
    top: -45vh;
    animation: roll 1s linear infinite;
}



@keyframes roll {
  0% {
    top: -50vh;
  }
  100% {
    top: 12.369791666666666vh;
  }
}

.paused {
   animation-play-state: paused !important; 
}

.played {
   animation-play-state: running !important; 
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css"> 
</head>

<body>
<div id="tutorialText" class="mainTexts">
 <p>Tutorial</p>
</div>
  <script src="script.js"></script>
</body>

</html>

Collectives™ on Stack Overflow

triggering CSS animation with JavaScript not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related