使用JavaScript触发CSS动画不起作用
[英]triggering CSS animation with JavaScript not working
问题描述
I want to trigger a CSS animation using javascript. 
我想使用JavaScript触发CSS动画。 The problem is I want to initiate the animation after 3 seconds but, the animation starts with no delay! 问题是我想在3秒后启动动画，但是动画没有延迟就开始了！
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 个解决方案
解决方案1
4 已采纳 2019-11-26 19:56:21
Because the animation property is set to the mainTexts class, not to the tutorialText element. 因为animation属性设置为mainTexts类，而不是tutorialText元素。 Just target the element which holds the animation property. 只需定位包含animation属性的元素即可。
Also, remove the -webkit- thingy. 另外，删除-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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.