Menu
got an simple animation with keyframes.
@-webkit-keyframes rotation {
0% { -webkit-transform: rotate(10deg); }
25% { -webkit-transform: rotate(5deg); }
50% { -webkit-transform: rotate(10deg); }
75% { -webkit-transform: rotate(5deg); }
100% { -webkit-transform: rotate(10deg); }
}
and
.class { -webkit-animation: rotation 1s infinite; }
Is it possible to add a pause between this keyframe animation? Like 5 seconds? I know there is a -webkit-animation-delay but this delays only the start of the animation.
P.S. I know its only the webkit prefix... at the end I get it through prefixr.
363
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. style.
CSS Animation Delay Syntax The CSS animation-delay property has the following syntax: animation-delay: [time] | initial | inherit; As you can see, there are three possible values: time, initial, and inherit. The first option is [time], which is the number of seconds or milliseconds before the animation starts.
You can animate multiple properties inside a keyframe rule and use multiple keyframes to specify an element's property values at specific points in time. For example, suppose you have an element that you want to animate from one position to another, horizontally.
Keyframing is the simplest form of animating an object. Based on the notion that an object has a beginning state or condition and will be changing over time, in position, form, color, luminosity, or any other property, to some different final form.
After struggling with this problem myself and the help of Denny Mueller I've found that the key is to stop before 100%.
You can use the delay to start with a delay and after the first iteration, the delay will be the amount of time that is left after the animation is finished.
Here is what I used for my implementation:
@-webkit-keyframes spincube {
from,to { }
8%,14% { -webkit-transform: rotateY(-90deg); }
24%,30% { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }
40%,46% { -webkit-transform: rotateY(180deg) rotateZ(90deg); }
56%,62% { -webkit-transform: rotateY(90deg) rotateX(90deg); }
72%,78% { -webkit-transform: rotateX(90deg); }
88%,94% { -webkit-transform: rotateX(0deg); }
}
As you can see, I stop at 94% and the remaining 6% is used to pause on the first frame.
89
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
