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

I just got this working on Firefox and Chrome. You just add/remove the below class accordingly to your needs.

.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;
}