loop - pulse animation css

Ejecute animación CSS3 solo una vez(al cargar la página)

Question

Estoy haciendo una página de aterrizaje simple impulsada por CSS3. Para que se vea increíble, hay un <a> desploma:

@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 hacerlo aún más increíble agregué una animación de vuelo estacionario:

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

Pero ahí viene el problema! Asigné 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 bien: el <a> salpica en la cara de los usuarios y tiene una buena vibración cuando lo coloca. 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 forma de resolver este problema sin JavaScript Jiggery clase Pokery?

Answer 1

Acabo de hacer que funcione 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;
}

Answer 2

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

Desafortunadamente, no hay forma de guardar ciertos estados de atributos en los estados de los elementos.

Tendrás que usar JavaScript.

Answer 3

Se puede hacer con un poco de sobrecarga adicional.

Simplemente envuelva 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

Si entiendo correctamente que quieres reproducir la animación en A solo una vez, debes agregar

animation-iteration-count: 1

al estilo para el a .