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

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?

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

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

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