Run CSS3 animation only once (at page loading)

Question

I\'m making a simple landing page driven by CSS3. To make it look awesome there\'s an plopping up:

@keyframes splash {
    from {
             


        

Answer 1

It can be done with a little bit of extra overhead.

Simply wrap your link in a div, and separate the animation.

the html ..

    me!

.. and the css ..

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

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