我在css中动画我的网站导航,我的问题是这样的。如何在两个不同的css动画之间交替
// Html file
<html>
<div class="class-one">
// some value
</div>
</html>
// Css file
.class-one {
width: 100px
height: 100px
animation: first-animation paused 7s;
animation: second-animation paused 7s;
}
我正在控制每个动画播放jQuery时的行为,与此类似。
// Javascript file
$(".class-one").click(function() {
$(".class-one").css("animation-play-state", "running");
});
我的问题是,我不能指定我想玩哪个动画,这只是播放第二个动画,而不是第一个。我怎样才能指定我想玩的动画?
在此先感谢!
你想两个动画结合成一个单一的动画,或者你想要彼此之后运行它们?如果是后者,则只需将动画的关键帧组合起来即可。请记住在CSS中,最后一个属性会覆盖它之前的那些属性 - 这就是为什么只有第二个动画正在播放。 – Terry
@Terry我想根据不同的情况播放每个动画。例如:如果页面上的元素1超过100像素,则播放动画1,如果不是,则播放动画2。 –
你想如何指定什么动画?通过用户交互?通过切换课程?这就是我不明白你的问题。 – Terry