Common styles of CSS animation effects animation

animation

Define an animation:

/*Set a keyframe to define the action performed at 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 keyframes and set the execution style of the animation*/
animation: mybox 5s 1s infinite;

Note:

1. Return to the initial position after the animation ends.
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 it takes for the animation effect to appear

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

The default value is: 1; unlimited times: infinite

animation-timing-function: defines the animation effect animation-fill-mode:

none: default value; the style takes effect after a delay;
backwards: The style takes effect before the delay;
forwards: After the animation ends, it stops at the end position;
both: has the characteristics of backwards and forwards;

Summarize

This is the end of this article about the commonly used styles of CSS animation effects. For more content about commonly used styles of CSS animation, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!