替换一个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