替換一個css3動畫與另一個

Question

我希望能夠爲我的網站上的某個圖像設置動畫效果（緩慢過渡的背景位置）。但是在某個用戶交互之後，我希望能夠移除該動畫並切換到另一個動畫。我該如何做到這一點？

Answer 1

您可以添加一個類它：

.element{ 
    animation: first 1s forwards; 
} 
.element.clicked{ 
    animation: second 1s forwards; 
} 

這樣，你不必刪除一個類。使用jQuery，只要使用此：

$('.element').click(function(){$(this).addClass('clicked');}); 

Answer 2

您添加和刪除一類的動畫屬性

.classOne { 
    animation: one 5s forwards; 
} 
.classTwo { 
    animation: two 3s forwards; 
} 

和JavaScript這樣做

var obj = document.getElementById('animatedElement'); 
obj.onclick = function() { 
    obj.classList.remove('classOne'); 
    obj.classList.add('classTwo'); 
} 

等價的jQuery

$('#animatedElement').on("click", function() { 
    $(this).removeClass('classOne').addClass('classTwo'); 
} 

Answer 3

使用:not選擇和切換的要素類，你可以做這樣的事情來改變當前元素的動畫：

#xpto:not(.anim) { 
    -webkit-transition:background-position 1s ease; 
    -moz-transition:background-position 1s ease; 
    -o-transition:background-position 1s ease; 
} 

#xpto.anim { 
    -webkit-transition:opacity 1s ease-in-out; 
    -moz-transition:opacity 1s ease-in-out; 
    -o-transition:opacity 1s ease-in-out; 
} 

#xpto:not(.anim):hover { 
    background-position: 0 0; 
} 

#xpto.anim:hover { 
    opacity: 0.2; 
} 

See this working demo