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

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 <a> splashes into the users face and has a nice vibration when he hovers it. Bit as soon as the user blurs the <a> the smooth stuff ends abruptly and the <a> 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?

score 55 · Accepted Answer · answered Mar 16 '12 at 18:40

55

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 <a> 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.

answered Mar 16 '12 at 18:40

buschtoens

8,091
9
42
60

2

Try adding `:not(:hover)` to the selector of the splash animation. – Blaise Apr 05 '14 at 08:59
1

@silvinci can you give Javascript code that solved this issue? – Dchris Apr 21 '14 at 22:49
3

@Dchris Just add a a class like "animate-this" and remove it after the animation finished. – buschtoens Apr 25 '14 at 06:52
1

@buschtoens How did you manage to know when the animation has finished with JS? – tonix Aug 17 '19 at 17:40
@buschtoens I'm sure you meant to provide more information but found yourself unable at the time. When you can, please provide more context as to why your answer could not be solved the way you wanted. – Jacksonkr Oct 20 '20 at 15:38
You could also not use shorthand at all and only set the properties you actually want to change on `:hover`. For example, `animation-name` and `animation-direction`. That would prevent resetting everything. See https://developer.mozilla.org/en-US/docs/Web/CSS/animation for details. – Mikko Rantalainen Sep 10 '21 at 14:23

Strelok · Answer 2 · 2022-09-09T14:21:58.337

42

If I understand correctly that you want to play the animation on A only once you have to add

animation-iteration-count: 1

to the style for the a.

edited Sep 09 '22 at 14:21

answered Dec 13 '11 at 05:17

Strelok

50,229
9
102
115

1

Yup. Works in Chrome since v43, and most current browsers: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count – Chris Moschini Jan 19 '21 at 19:44

score 29 · Answer 3 · answered Jun 12 '13 at 02:19

29

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

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

the html ..

<div class="animateOnce">
    <a class="animateOnHover">me!</a>
</div>

.. and the css ..

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

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

answered Jun 12 '13 at 02:19

Butsuri

738
9
14

1

Nice idea. But in the end I shall prefere JS extra code over HTML overhead. Still +1 ;) – buschtoens Jun 13 '13 at 13:08

score 22 · Answer 4 · answered Jul 30 '14 at 07:31

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

score 3 · Answer 5 · answered Jan 08 '22 at 06:15

3

Just use

animation: hover 1s ease-in-out forwards;

answered Jan 08 '22 at 06:15

Rajanand

105
8

3

While this code snippet may solve the problem, it doesn't explain why or how it answers the question. Please [include an explanation for your code](//meta.stackexchange.com/q/114762/269535), as that really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Luca Kiebel Jan 09 '22 at 17:21

Gass · Answer 6 · 2021-01-18T21:39:40.913

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.

Olivier C · Answer 7 · 2022-11-03T03:32:14.977

Impossible in CSS only, you need a javascript workaround. As already explained by some here, the animation-iteration-count property is reset on a :hover. The best is to do everything in javascript, but for reasons of ease of customization of the code you may want to keep the possibility of doing something in CSS.

So, in JS :

// adding a class to the html tag, during the animation time 
const startPage = (() => {
  const html = document.documentElement,
        s = 'start'
  html.classList.add(s)
  window.addEventListener('load', function() {
    setTimeout(() => {
      html.classList.remove(s)
    }, 1500) // the time must be at least equal to the duration of the CSS animation (personally I put a little more).
  })
})()

And for the CSS:

/* the presence of the `.start` class conditions the animation */
.start .leaflet-marker-pane {
    animation: animDrop 1s ease;
}

score -1 · Answer 8 · edited Nov 28 '18 at 03:21

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.

<li class="animated slideInLeft delay-1s animation-iteration-count: 1"><i class="fa fa-credit-card" aria-hidden="true"></i> 1111</li>


<li class="animated slideInRight delay-1-5s animation-iteration-count: 1"><i class="fa fa-university" aria-hidden="true"></i> 222222</li>

<li class="animated lightSpeedIn delay-2s animation-iteration-count: 1"><i class="fa fa-industry" aria-hidden="true"></i> aaaaaa</li>

<li class="animated slideInLeft delay-2-5s animation-iteration-count: 1"><i class="fa fa-key" aria-hidden="true"></i> bbbbb</li>

<li class="animated slideInRight delay-3s animation-iteration-count: 1"><i class="fa fa-thumbs-up" aria-hidden="true"></i> ccccc</li>

score -1 · Answer 9 · answered Nov 08 '20 at 18:33

-1

So i just found a solution for that: In the hover animation do this:

animation: hover 1s infinite alternate ease-in-out,splash 1;

answered Nov 08 '20 at 18:33

Haki

1
4

Run CSS3 animation only once (at page loading)

9 Answers9

Linked