Common styles of animation of CSS animation effect

Animation

Define an animation:

/*Set a key frame to define the action of each step of the animation*/
@keyframes mybox{
            0%{transform: translate(0,0);}
            25%{transform: translate(200px,0);}
            50%{transform: translate(200px,200px);}
            75%{transform: translate(0,200px);}
            100%{transform: translate(0,0);}
        }

/*Reference key frame, set animation execution style*/
animation: mybox 5s 1s infinite;

Note:

1. Return to the original position after the animation.
2、from->0%    to ->100%

Animation name: the name of the animation, (must exist)

Animation duration: the duration of the animation

Animation delay: specifies how long the animation will appear

Animation iteration count: defines the number of times the animation is executed

The default value is: 1; infinite times: infinite

Animation timing function: to define the effect of animation animation fill mode:

None: the default value; the style takes effect after the delay;
Backwards: the style takes effect before the delay;
Forwards: stop at the end of the animation;
Both: it has the characteristics of backward and forward;

summary

This article on the CSS animation animation of the commonly used style of this article introduced here, more related CSS animation common style content, please search the previous articles of developeppaer or continue to browse the related articles below, I hope you will support developeppaer more in the future!