CODEWITHSUNDEEP
javascripthtmlcsscss-animations
Sara Ree
Sara Ree

Reputation: 3543

triggering CSS animation with JavaScript not working

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?

Upvotes: 0

Views: 57

Answers (1)

Jorge Fuentes Gonz&#225;lez
Jorge Fuentes Gonz&#225;lez

Reputation: 11809

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>

Upvotes: 3

Related Questions