Ejecuta la animación de CSS3 solo una vez (en la carga de la página)

Question

Estoy haciendo una página de destino simple dirigida por CSS3. Para hacer que parezca increíble hay un <a> plopping arriba:

@keyframes splash { 
    from { 
     opacity: 0; 
     transform: scale(0, 0); 
    } 
    50% { 
     opacity: 1; 
     transform: scale(1.1, 1.1); 
    } 
    to { 
     transform: scale(1, 1); 
    } 
} 

y para que sea aún más impresionante que ha añadido una animación de vuelo estacionario:

@keyframes hover { 
    from { 
     transform: scale(1, 1); 
    } 
    to { 
     transform: scale(1.1, 1.1); 
    } 
} 

Pero allí viene el problema! Me asignaron las animaciones de esta manera:

a { 
    /* Some basic styling here */ 

    animation: splash 1s normal forwards ease-in-out; 
} 
a:hover { 
    animation: hover 1s infinite alternate ease-in-out; 
} 

Todo funciona muy bien: Los <a> salpica en los usuarios se enfrentan y tiene una agradable vibración cuando se cierne ella. Poco después de que el usuario borre el <a>, las cosas suaves terminan abruptamente y el <a> repite el splash -animación. (Lo cual es lógico para mí, pero no lo quiero) ¿Hay alguna manera de resolver este problema sin JavaScript Clase Jiggery Pokery?

Answer 1

Después de horas de búsqueda en Google: No, no es posible sin JavaScript. El animation-iteration-count: 1; se guarda internamente en el atributo animation shothand, que obtiene restablecido y sobrescrito en :hover. Cuando desenfocamos el <a> y lanzamos el :hover, la clase anterior vuelve a aplicar y, por lo tanto, nuevamente restablece el atributo animation.

Por desgracia, no hay forma de guardar un determinado atributo en los estados de los elementos.

Deberá usar JavaScript.

Answer 2

si he entendido bien que desea reproducir la animación en A sola vez Youu tienen que añadir

animation-iteration-count: 1 

al estilo de la a.

Answer 3

Se puede hacer con un poco de sobrecarga adicional.

Simplemente ajuste su enlace en un div y separe la animación.

el html ..

<div class="animateOnce"> 
    <a class="animateOnHover">me!</a> 
</div> 

.. y el css ..

.animateOnce { 
    animation: splash 1s normal forwards ease-in-out; 
} 

.animateOnHover:hover { 
    animation: hover 1s infinite alternate ease-in-out; 
} 

Answer 4

solo Tengo esta trabajando en Firefox y Chrome. Simplemente agrega/elimina la clase siguiente de acuerdo a sus necesidades.

.animateOnce { 
    -webkit-animation: NAME-OF-YOUR-ANIMATION 0.5s normal forwards; 
    -moz-animation: NAME-OF-YOUR-ANIMATION 0.5s normal forwards; 
    -o-animation:  NAME-OF-YOUR-ANIMATION 0.5s normal forwards; 
}