如何在兩個不同的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"); 

    });

我的問題是，我不能指定我想玩哪個動畫，這只是播放第二個動畫，而不是第一個。我怎樣才能指定我想玩的動畫？

在此先感謝！

來源

2017-06-16 Mike Greathouse

你想兩個動畫結合成一個單一的動畫，或者你想要彼此之後運行它們？如果是後者，則只需將動畫的關鍵幀組合起來即可。請記住在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');

來源

2017-06-16 19:17:07 McHat

非常感謝你！這有助於解決我的問題！ –

很高興幫助:)只要記住 - 在CSS中，如果你多次聲明一個屬性（在你的情況下動畫屬性），只有最後一個聲明將適用。當第二個值被設置時，該屬性的第一個值將被清除。出於這個原因，在一個類定義中多次聲明一個屬性永遠不是一個好主意！ – McHat

如何在兩個不同的css動畫之間交替

回答

相關問題