Jquery 如何在两个不同的css动画之间切换_Jquery_Html_Css_Animation

Jquery 如何在两个不同的css动画之间切换

jquery html css animation

Jquery 如何在两个不同的css动画之间切换,jquery,html,css,animation,Jquery,Html,Css,Animation,我正在用css制作我的网站导航动画，我的问题是这样的 // Html file <html> <div class="class-one"> // some value </div> </html> // Css file .class-one { width: 100px height: 100px

我正在用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;
        }

我的问题是我无法指定要播放的动画，这只是播放第二个动画，而不是第一个。如何指定要播放的动画

提前谢谢

在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;
}

是要将两个动画合并为一个动画，还是要在彼此之后运行它们？如果是后者，则只需组合动画的关键帧即可。请记住，在CSS中，最后一个属性将覆盖它之前的属性，这就是为什么只播放第二个动画。@Terry我想根据不同的情况播放每个动画。例如：如果页面上的元素1高于100px，则播放动画1，如果不高于100px，则播放动画2。您希望如何指定哪个动画？通过用户交互？通过切换一个类？这就是为什么我不理解你的问题。@Terry是的，通过用户交互，但在下面回答的用户的帮助下，我能够理解它，谢谢你的回答！！！很高兴为您提供帮助：）请记住——在CSS中，如果您多次声明属性（在您的示例中为animation属性），则只应用最后一次声明。设置第二个值时，该属性的第一个值将被清除。因此，在单个类定义中多次声明属性从来都不是一个好主意！

// 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    
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');