使用JavaScript觸發CSS動畫不起作用
[英]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>
我想念的是什么？
1 個解決方案
解決方案1
4 已采納 2019-11-26 19:56:21
因為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>
Javascript CSS marginTop過渡不通過動畫觸發
[英]Javascript css marginTop transition not triggering with animation
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.