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  lt a gt  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             And to make it even more awesome I added a hover animation    keyframes hover       from           transform  scale 1  1             to           transform  scale 1 1  1 1             But there comes the problem  I assigned the animations like this   a          Some basic styling here         animation  splash 1s normal forwards ease-in-out    a hover       animation  hover 1s infinite alternate ease-in-out      Everything works just fine  The  lt a gt  splashes into the users face and has a nice vibration when he hovers it  Bit as soon as the user blurs the  lt a gt  the smooth stuff ends abruptly and the  lt a gt  repeats the splash-animation   Which is logical to me  but I don t want it to  Is there some way to solve this problem without some JavaScript Class Jiggery Pokery

User · Answer

The following code without  iteration-count  1  was resulting in all line items pulsing after entering  until the last item loaded  even though  pulse was not being used     lt li class  animated slideInLeft delay-1s animation-iteration-count  1  gt  lt i class  fa fa-credit-card  aria-hidden  true  gt  lt  i gt  1111 lt  li gt     lt li class  animated slideInRight delay-1-5s animation-iteration-count  1  gt  lt i class  fa fa-university  aria-hidden  true  gt  lt  i gt  222222 lt  li gt    lt li class  animated lightSpeedIn delay-2s animation-iteration-count  1  gt  lt i class  fa fa-industry  aria-hidden  true  gt  lt  i gt  aaaaaa lt  li gt    lt li class  animated slideInLeft delay-2-5s animation-iteration-count  1  gt  lt i class  fa fa-key  aria-hidden  true  gt  lt  i gt  bbbbb lt  li gt    lt li class  animated slideInRight delay-3s animation-iteration-count  1  gt  lt i class  fa fa-thumbs-up  aria-hidden  true  gt  lt  i gt  ccccc lt  li gt

User · Answer

So i just found a solution for that  In the hover animation do this  animation  hover 1s infinite alternate ease-in-out splash 1

User · Answer

An easy solution to solve this problem is by just adding more seconds to the animation in a hover and taking advantage of the transitions in  keyframes a hover           animation  hover 200s infinite alternate ease-in-out         Just make the progression of  keyframes go faster by using percentages   keyframes hover       0            transform  scale 1  1             1            transform  scale 1 1  1 1             100            transform  scale 1 1  1 1            200 seconds or 300 seconds in the animation is more than enough to make sure the animation doesn t restart  A normal person won t last more than a few seconds hovering an image

User · Answer

After hours of googling  No  it s not possible without JavaScript  The animation-iteration-count  1  is internally saved in the animation shothand attribute  which gets resetted and overwritten on  hover  When we blur the  lt a gt  and release the  hover the old class reapplies and therefore again resets the animation attribute   There sadly is no way to save a certain attribute states across element states   You ll have to use JavaScript

User · Answer

For above query apply below css for a   animation-iteration-count  1

User · Answer

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

User · Answer

If I understand correctly that you want to play the animation on A only once youu have to add   animation-iteration-count  1   to the style for the a

User · Answer

It can be done with a little bit of extra overhead   Simply wrap your link in a div  and separate the animation   the html      lt div class  animateOnce  gt       lt a class  animateOnHover  gt me  lt  a gt   lt  div gt       and the css      animateOnce       animation  splash 1s normal forwards ease-in-out      animateOnHover hover       animation  hover 1s infinite alternate ease-in-out

[css] Run CSS3 animation only once (at page loading)

Examples related to css

Examples related to css-animations