如何在两个不同的css动画之间交替

问题描述：

我在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

答

在你的CSS中，第二个动画属性声明覆盖了第一个。你需要两个类：

// HTML 
<body> 
    <div class="element-in-question"></div> 
</body> 


// CSS 
.class-one { 
    width: 100px; 
    height: 100px; 
    animation: first-animation paused 7s; 
} 

.class-two { 
    width: 100px; 
    height: 100px; 
    animation: second-animation paused 7s; 
}

然后使用jQuery，您可以设置类的元素对你希望看到动画：

// jQuery  
if (condition) { 

    // to set first-animation 
    $('.element-in-question').addClass('class-one').removeClass('class-two'); 

} else if (otherCondition) { 

    // to set second-animation 
    $('.element-in-question').addClass('class-two').removeClass('class-one'); 
} 

// trigger with your existing code 
$('.element-in-question').css('animation-play-state', 'running');

非常感谢你！这有助于解决我的问题！ –

很高兴帮助:)只要记住 - 在CSS中，如果你多次声明一个属性（在你的情况下动画属性），只有最后一个声明将适用。当第二个值被设置时，该属性的第一个值将被清除。出于这个原因，在一个类定义中多次声明一个属性永远不是一个好主意！ – McHat

如何在两个不同的css动画之间交替

相关推荐