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 .