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

Estoy haciendo una página de aterrizaje simple impulsada por CSS3. Para que se vea impresionante hay un <a> plopping up: 

@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 impresionante, agregué una animación flotante: 

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

Pero ahí viene el problema! He asignado las animaciones como esta: 

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 agradable vibración cuando se cierne sobre él. Bit tan pronto como el usuario difumina el <a> el material liso termina abruptamente y el <a> se repite la splash-animación. (Lo cual es lógico para mí, pero no quiero que) ¿Hay alguna manera de resolver este problema sin alguna clase de JavaScript Jiggery Pokery?

Author: Butsuri, 2011-12-13
Source

4 answers

Después de horas de googlear: No, no es posible sin JavaScript. El animation-iteration-count: 1; se guarda internamente en el atributo animation shothand, que se restablece y se sobrescribe en :hover. Cuando desenfocamos el <a> y liberamos el :hover la antigua clase vuelve a aplicar y por lo tanto nuevamente restablece el atributo animation.

Lamentablemente no hay manera de guardar ciertos estados de atributo entre estados de elemento.

Tendrás que usar JavaScript.

 23
Author: buschtoens,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-03-16 18:40:38

Se puede hacer con un poco de sobrecarga adicional.

Simplemente envuelve tu enlace en un div y separa 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;
}
 18
Author: Butsuri,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-12 02:19:02

Acabo de conseguir esto trabajando en Firefox y Chrome. Simplemente agregue / elimine la siguiente clase 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;
}
 16
Author: Ricardus,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-30 07:31:12

Si entiendo correctamente que desea reproducir la animación en A sólo una vez que usted tiene que añadir 

animation-iteration-count: 1

Al estilo para el a.

 14
Author: Strelok,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-12-13 05:17:03