Translator: Platycodon grandiflorum

The original link

When an attribute like ** animation-rotund-delay ** is not available, the animation-delay attribute can be used to delay the animation effect, or Javascript can be used to “fake” the effect. The best way to “forge” depends on the number of repetitions of the animation, its performance, and whether the lag time is the same with each repetition.

What is animation periodic delay? Sometimes we need to have an animation play multiple times and wait a certain amount of time between each animation play cycle. This is called animation periodic delay.

Say you want an element to change three times, but you want to wait four seconds (animation execution time is 1s) before each animation repeats. You can add delay frames to the keyframe definition and set the animation to trigger 3 times:

.animate3times {
    background-color: red;
    animation: yellow;
    animation-iteration-count: 3;
    animation-duration: 5s;
 } 
Copy the code
@keyframes yellow { 80% { transform: scale(1); background-color:red; } 80.1 {background-color: green; The transform: scale (0.5); } 100% { background-color: yellow; The transform: scale (1.5); }}Copy the code

Note that the first keyframe selector is at the 80% mark and is the same as the default style, which will make your element change three times, with the default style taking up 80% of the animation time (5s), or 4s, and then the element background color changing from green to yellow in the remaining 1s of the animation, increasing in size from small to large. Repeat this operation for three times.

This method also works for infinitely repetitive animations, however, it only works for scenes where the delay time before each animation is exactly the same. If you want to change the delay before each animation while keeping the same size and the length of the color changes, you need to redefine @keyframes.

To implement different animation periodic delays, you can create a separate animation that implements three different delay lengths.

.animate3times {
    background-color: red;
    animation: yellow;
    animation-iteration-count: 1;
    animation-duration: 15s;
 } 
Copy the code
@keyframes yellow {0%, 13.32%, 20.01%, 40%, 46.67%, 93.32% {transform: scale(1); background-color:red; } 13.33%, 40.01%, 93.33% {background-color: green; The transform: scale (0.5); } 20%, 46.66%, 100% {background: yellow; The transform: scale (1.5); }}Copy the code

This method is more difficult to code and maintain and only works for a single animation cycle. If you want to change the number of animations or the delay time per repetition, you also need to declare new keyframes.

Implement animation periodic delay tips

There is a practical solution to the above problems. This method is not officially permitted by the animation specification, but it is not banned either, and browsers support it: you can declare an animation multiple times, each with a different delay

.animate3times {
    animation: **yellow, yellow, yellow**;
    animation-delay: 0, 4s, 10s;
    animation-duration: 1s;
 } 
Copy the code
@keyframes yellow { 0% { background-color: green; The transform: scale (0.5); } 100% { background-color: yellow; The transform: scale (1.5); }}Copy the code

Sample codepen. IO/estelle/pen… .

We have called this animation three times, each time with a different delay defined. In the example, each animation ends before the next animation begins. Assuming that the animation cycles overlap, the effects will appear as the last declared animation, although the animations will occur simultaneously.

Sample codepen. IO/estelle/pen…

Of course, you can also use Javascript’s AnimationStart, AnimationIteration, and AnimationEnd event listeners to add or remove the animation name or class name from the element.