Can't stop animation at end of one cycle

Question

I'm making a CSS animation at the minute, and in it I'm moving stuff and want it to stay at the end position until the user moves their mouse away.

body {
    background: url('osx.jpg');
    padding: 0;
    margin: 0;
    line-height: 60px;
}

@-webkit-keyframes item1 {
    0% { bottom: -120px; left: 0px; }
    10% { bottom: -40px; left: 10px; -webkit-transform: rotate(5deg); }
    100% { bottom: -40px; left: 10px; -webkit-transform: rotate(5deg); }
    }

@-webkit-keyframes item2 {
    0% { bottom: -120px; left: 0px; }
    10% { bottom: 60px; left: 20px; -webkit-transform: rotate(7deg); }
    100% { bottom: 60px; left: 20px; -webkit-transform: rotate(7deg); }
}

@-webkit-keyframes item3 {
    0% { bottom: -120px; left: 0px; }
    10% { bottom: 160px; left: 30px; -webkit-transform: rotate(9deg); }
    100% { bottom: 160px; left: 30px; -webkit-transform: rotate(9deg); }
}

    div {
    position: relative;
    }
#folder {
    width: 120px;
    margin: 0px auto;
}

#folder > div {
    position: absolute; 
}

#folder:hover > div:nth-of-type(1) {
    -webkit-animation-name: item1;
    -webkit-animation-duration: 10s;
}

#folder:hover > div:nth-of-type(2) {
    -webkit-animation-name: item2;
    -webkit-animation-duration: 10s;
}

#folder:hover > div:nth-of-type(3) {
    -webkit-animation-name: item3;
    -webkit-animation-duration: 10s;
}

Whenever the animation ends though, it just repeats itself. I only want it to happen once and stay where it is until the user moves away. I tried using the paused thing from the spec but it doesn't work as I'd expect it to. Any help is appreciated. Thanks. :)

score 109 · Accepted Answer · edited Feb 05 '15 at 23:13

109

The following comment worked for me. Thanks michael

"You need to add the fill-mode to freeze the animation state at the end of the animation.

-webkit-animation-fill-mode: forwards;

forwards leaves the animation in the state of the last frame

backwards leaves the animation at the start

edited Feb 05 '15 at 23:13

Factor Mystic

26,279
16
79
95

answered May 03 '11 at 15:26

iancrowther

5,143
4
25
25

I know it's a bit late, but the correct way actualy is animation-play-state: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state – Marco Oct 18 '17 at 12:44

score 19 · Answer 2 · answered Jul 25 '13 at 00:30

19

Just in case your animation still resets to the first frame, be careful with the order in which you declare the css:

This is working fine:

    animation: yourAnimationName 1s;
    animation-fill-mode: forwards;

This won't (reset to first frame):

    animation-fill-mode: forwards;
    animation: yourAnimationName 1s;

Tricky!

answered Jul 25 '13 at 00:30

Mr_Pouet

4,061
8
36
47

Thank you! Any reason for why this is? – mariachimike Jan 09 '14 at 00:35
2

That happens because `animation` is shorthand for all `animation-*` properties and setting `animation` will overwrite all `animation-*` properties. This behavior is identical to other shorthands (e.g. `background` or `border`). If you use `animation` shorthand and do not define fill mode, then `none` will be used by default. – Mikko Rantalainen May 08 '15 at 06:10
Great point! I had no clue why was this happening to me! – Adrian Florescu Sep 09 '15 at 10:15
3

You can combine it like this one-liner `animation: 1s ease 0s normal forwards 1 running yourAnimationName;` – Vasil Oct 13 '15 at 10:27

score 2 · Answer 3 · answered Feb 10 '11 at 14:37

2

If I understand the question correctly, it sounds like you need to set the iteration to '1'.

-webkit-animation-iteration-count: 1;

answered Feb 10 '11 at 14:37

word5150

51
2

That was it, thanks a bunch! – Stan Smulders Feb 15 '17 at 12:03

score 1 · Answer 4 · answered Jan 11 '11 at 17:09

1

The css3 animations reset to the default style at the end of the animation. You can try something with javascript:

You can add an eventListener to your animation, retrieve the styles you wish to keep, apply them manually and remove the animation.

document.getElementById('yourdiv').addEventListener(
    'webkitAnimationEnd',
    function(){
        document.getElementById('yourdiv').style.backgroundPosition = '0px 0px';
        document.getElementById('yourdiv').style.webkitAnimationName = 'none';
    }, 
    false
);

answered Jan 11 '11 at 17:09

Stef

523
2
7
13

this is true, but the experiment I was carrying out was to try and do it with just CSS. Thanks for trying though – Johnny Feb 17 '11 at 21:12
5

You need to add the fill-mode to freeze the animation state at the end of the animation. "-webkit-animation-fill-mode:forwards" You shouldn't just make the animation super long - that will chew up your users CPU - CSS animations are very CPU intensive. – Michael Mullany Apr 14 '11 at 18:36
@Michael Interesting! Thanks for this, I didn't know it existed. I will try it and will certainly use it in my next projects. – Stef Apr 15 '11 at 01:32
@MichaelMullany I think the fact CSS3 animations are CPU intensive does not apply anymore. Browsers will try to use GPU acceleration as much as possible if you use 3D transforms in animations, which you should always do. – Lorenzo Polidori Jan 23 '14 at 07:47
Agreed. This was back in the day. Just edited the answer to reflect that. – Michael Mullany Jan 23 '14 at 15:59

score 0 · Answer 5 · answered Jun 22 '10 at 09:57

0

try this:

-webkit-animation-duration: 10s, 10s;

:)

answered Jun 22 '10 at 09:57

CMartins

3,247
5
38
53

will animate over 10 seconds and left over 10 seconds. – CMartins Jun 22 '10 at 09:59
Still nothing, I decided to make the animation really long instead (like 10,000s long) so that the users unlikely to hover over it for that length of time ;D – Johnny Jul 03 '10 at 23:25

Can't stop animation at end of one cycle

5 Answers5

Linked