我有一个文本，我想对它应用两个不同的关键帧动画，命名为animeUp和animeDown。另外，我希望能够使用 javascript 控制动画。
期望的结果是一段 javascript 代码来启动animeUp动画，而另一行代码用来启动animeDown...
我尝试通过添加改变的 CSS 类来播放和暂停动画，animation-play-state但使用这种方法我只能控制其中一个动画！
注意：我们想要关键帧动画，因为它们是......
//pause the animation at first
document.getElementById("Text").classList.add("paused");
//after 2 seconds initiate the animation
setTimeout(function(){
document.getElementById("Text").classList.add("played");
}, 2000)
html{
overflow:hidden;
}
#Text{
position: absolute;
overflow: hidden;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 7.5vw;
color: rgb(242, 242, 242);
left: 1vw;
top: -45vh;
animation: animeUp 0.5s ease-out ;
animation: animeDown 0.5s ease-in ;
animation-fill-mode: forwards;
}
@-webkit-keyframes animeUp {
from { top: 10vh }
to { top: -50vh }
}
@-webkit-keyframes animeDown {
from { top: -50vh }
to { top: 10vh }
}
.paused {
-webkit-animation-play-state: paused !important;
}
.played {
-webkit-animation-play-state: running !important;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class = "container">
<p id="Text">Tutorial</p>
</div>
</body>
</html>
qq_花开花谢_0
相关分类