CSS – prevenir: ¿desplazarse durante la animación?

Tengo un

que reproduce una animación. Quiero evitar que div:hover tenga efecto en ese

mientras la animación aún se está reproduciendo.

Por ejemplo:

 
 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/

En este ejemplo, la animación aumenta el tamaño de la letra “A”. Pero si desplaza la animación, div:hover cambia a la letra “B”. Me gustaría evitar que esto suceda. En otras palabras, si se mantiene el mouse, debe seguir siendo la letra “A” hasta que finalice la animación. ¿Cómo debe hacerse esto en CSS?

Puedes hacer esto con Jquery si no te importa. Para la transición:

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

Para la animación:

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

También puedes usar js puros:

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

Puedes leer este post