Replacing one css3 animation with another - html

Question

I want to be able to set an animation effect for a certain image on my site (slow transition of the background position). But after a certain user interaction, I want to be able to remove that animation and switch to a different one. How do I accomplish this?

Answer 1

You can add a class to it:
.element{
animation: first 1s forwards;
}
.element.clicked{
animation: second 1s forwards;
}
This way, you will not have to remove a class. With jQuery, just use this:
$('.element').click(function(){$(this).addClass('clicked');});

Answer 2

You add and remove a class with the animation properties
.classOne {
animation: one 5s forwards;
}
.classTwo {
animation: two 3s forwards;
}
and the javascript to do so
var obj = document.getElementById('animatedElement');
obj.onclick = function() {
obj.classList.remove('classOne');
obj.classList.add('classTwo');
}
the equivalent jQuery
$('#animatedElement').on("click", function() {
$(this).removeClass('classOne').addClass('classTwo');
}

Answer 3

Using :not selector and toggling an element class you can do something like this to change current element animation:
#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