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. :)
infinite. The animation will repeat forever. <number> The number of times the animation will repeat; this is 1 by default. You may specify non-integer values to play part of an animation cycle: for example, 0.5 will play half of the animation cycle.
The only way to truly pause an animation in CSS is to use the animation-play-state property with a paused value. In JavaScript, the property is “camelCased” as animationPlayState and set like this: element.
The animation-iteration-count property in CSS is used to specify the number of times the animation will be repeated. It can specify as infinite to repeat the animation indefinitely.
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
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!
If I understand the question correctly, it sounds like you need to set the iteration to '1'.
-webkit-animation-iteration-count: 1;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With