CSS - prevent :hover during animation?

Question

I have a <div> that plays an animation. I want to prevent div:hover from taking effect on that <div> while the animation is still playing.

For example:

<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 hover the animation, div:hover changes it to letter "B". I would like to stop this from happening - in other words, if hovered it should still remain the letter "A" until the animation is finished. How should this be done in CSS?

Answer 1

You can do this with Jquery if you don't mind. For transition:

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

For annimation:

$("#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