css3-implementation of animation effect

This chapter will introduce you to the implementation of css3-animation effect, so that you can understand how a simple css3 animation is implemented. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

css3-animation:

has the following attributes:

1, animation-name Custom animation name
2. animation-duration specifies how many seconds or milliseconds it takes to complete the animation. The default value is 0;
3. animation-timing-function is the time curve of the animation, linear at a constant speed, ease at first slow and then fast, and then slow down before the end. .
4. animation-delay is the delay interval before starting the animation. The default is 0
5. animation-iteration-count. The number of times the animation is played. The default is 1
6. animation-direction. Whether to play in reverse in turn. Animation
7, animation-play-state Whether the animation is running or paused. Value: paused specifies a paused animation; running specifies a running animation, default.

Code example (take translation--translate as an example to illustrate the entire animation process):

Rendering:

The above is the detailed content of css3-implementation of animation effect. For more information, please follow other related articles on the PHP Chinese website!