CSS - prevent: hover over animation?

Question

I have a <div> that plays the animation. I want the div:hover not affect the <div> during the animation.

For instance:

 <div></div> 

 div:before { content: "A"; -webkit-animation: A 5s; -moz-animation: A 5s; animation: A 5s; } @-webkit-keyframes A { 100% { font-size: 5em; } } @-moz-keyframes A { 100% { font-size: 5em; } } @keyframes A { 100% { font-size: 5em; } } div:hover:before { content: "B"; } 

http://jsfiddle.net/hh54D/

In this example, the animation increases the size of the letter "A". But if you move the animation, div:hover will change it to the letter "B". I would like to stop this because of this - in other words, if it freezes, it will still remain the letter “A” until the animation ends. How to do it in CSS?

Answer 1

You can do this with jquery if you don't mind. To go:

 $("#YourDivID").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){change div content to B}); 

For annihilation:

 $("#YourDivID").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){change div content}); 

You can also just use pure js:

 element.addEventListener("webkitAnimationEnd", callfunction,false); element.addEventListener("animationend", callfunction,false); element.addEventListener("oanimationend", callfunction,false); 

You can read this post.