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?
1 answers
solution1
4 ACCPTED 2019-11-26 19:56:21
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.