[英]triggering CSS animation with JavaScript not working
我想使用JavaScript触发CSS动画。 问题是我想在3秒后启动动画,但是动画没有延迟就开始了!
为什么? 我在开始时通过添加暂停的类来暂停动画...但是它不起作用..!?
//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>
我想念的是什么?
因为animation
属性设置为mainTexts
类,而不是tutorialText
元素。 只需定位包含animation
属性的元素即可。
另外,删除-webkit-
thingy。 不再需要了。
//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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.