Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pause between keyframe animations

Tags:

css

animation

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.

like image 363
Denny Mueller Avatar asked Jul 27 '12 14:07

Denny Mueller


People also ask

How do you pause animation?

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.

How do you delay an animation in CSS?

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.

Can you have multiple keyframes in an animation property?

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.

What is keyframing in animation?

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.


1 Answers

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.

like image 89
Michiel Pater Avatar answered Oct 07 '22 00:10

Michiel Pater