Tengo un
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
- Animación SVG y Firefox
- Revelar texto desde el centro con la animación CSS
- Web animation css highlight
- Transición de animación CSS
- Animar el color de fondo de una celda de una tabla HTML (o toda la fila) en un evento
- CSS cambia la duración de la animación sin saltar
- Animación de trazo, ¿cómo adjuntar otra ruta al trazo que aparece?
- Wobble Elastic Animation en HTML
- ¿Cómo puedo crear un botón animado con una hoja de Sprite usando Javascript?
- Animación CSS: anima un elemento tras otro
- animar con elegancia una stack de divs