Article directory

1. CSS3 animation properties
- 1. Introduction to common animation properties of CSS3
- 2. Code example - the use of CSS3 common animation properties
Two, CSS3 animation property shorthand

1. CSS3 animation properties

1. Introduction to common animation properties of CSS3

Animations in CSS3 use the @keyframes keyword to define animations;

@keyframes element-move {
    
      
  0% {
    
     transform: translateX(500px); }  
  100% {
    
     transform: translateX(0); }  
}

In the animation defined by @keyframes, a series of CSS properties can be set to control the running of the animation. The common properties are as follows: (The following animation properties are set in the style of the label element that performs animation)

animation-name attribute: Set the animation name when @keyframes defines the animation. It is generally used in the label element that calls the animation. It is used to define which key frames the animation executes. This attribute must be set when calling the animation;

        div {
    
    
            /* 设置动画名称 之前使用 @keyframes 定义的 element-move 动画 */
            animation-name: element-move;
        }

animation-duration attribute: set the duration of CSS3 animation, the default is 0;
- The unit can be seconds s;
- The unit can also be milliseconds ms;

        div {
    
    
            /* 设置动画执行时间 2 秒 */
            animation-duration: 2s;
        }

animation-timing-function attribute: set the "time function" of the animation, which reflects the speed change curve of the animation; common values are
- linear
- ease in and out
- ease-in insertion
- ease-out

        div {
    
    
            /* 设置动画运动曲线 ease 缓入缓出 */
            animation-timing-function: ease;
        }

animation-delay attribute: set the animation delay time, delay the specified time, and then execute the animation;
- The unit can be seconds s;
- The unit can also be milliseconds ms;

        div {
    
    
            /* 设置动画开始时间 1 秒后开始 */
            animation-delay: 1s;
        }

animation-iteration-count attribute: set the number of repetitions of CSS3 animation execution;
- Specific times can be set, such as: 2 , 100 ;
- If you set infinite times, you can set the infinite property value;

        div {
    
    
            /* 设置动画执行次数 无限循环播放 */
            animation-iteration-count: infinite;
        }

animation-direction attribute: Set the playback direction of the animation; common values are as follows:
- normal play normally
- reverse play in reverse
- alternate play alternately

        div {
    
    
            /* 设置动画播放方向 交替播放 一次正向一次反向 */
            animation-direction: alternate;
        }

animation-fill-mode attribute: set the state after the animation is played; common values are as follows:
- none does not change the element style
- forwards keep the style at the end of the animation
- backwards maintains the style at the beginning of the animation, returning to the starting point;

        div {
    
    
            /* 设置动画执行完毕后的状态 回到起始状态 */
            animation-fill-mode: backwards;
        }

animation-play-state attribute: set the animation playback state, common values are as follows:
- running
- paused

        div {
    
    
            /* 设置动画当前的播放状态 运行状态 */
            animation-play-state: running;
        }

2. Code example - the use of CSS3 common animation properties

Code example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3 动画属性</title>
    <style>
        @keyframes element-move {
      
      
            0% {
      
      
                transform: translateX(500px);
            }
            100% {
      
      
                transform: translateX(0);
            }
        }
        
        div {
      
      
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 设置动画名称 之前使用 @keyframes 定义的 element-move 动画 */
            animation-name: element-move;
            /* 设置动画执行时间 2 秒 */
            animation-duration: 2s;
            /* 设置动画运动曲线 ease 缓入缓出 */
            animation-timing-function: ease;
            /* 设置动画开始时间 1 秒后开始 */
            animation-delay: 1s;
            /* 设置动画执行次数 无限循环播放 */
            animation-iteration-count: infinite;
            /* 设置动画播放方向 交替播放 一次正向一次反向 */
            animation-direction: alternate;
            /* 设置动画执行完毕后的状态 回到起始状态 */
            animation-fill-mode: backwards;
            /* 设置动画当前的播放状态 运行状态 */
            animation-play-state: running;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

Execution effect: After the webpage is running, the small square below moves back and forth in an infinite loop;

insert image description here

Two, CSS3 animation property shorthand

1. Shorthand syntax for CSS3 animation properties

Shorthand syntax for CSS3 animation properties:

animation: 动画名称 持续时间 运动曲线 开始时间 播放次数 播放方向 结束状态;
animation: name duration timing-function delay iteration-count direction fill-mode;

Between the various attributes of the above abbreviations, use spaces to separate them;

Among the animation properties, except for the animation-play-state property, other animation properties can be shortened to the animation property;

The animation-play-state attribute controls the start and pause of the animation, which generally needs to be controlled separately according to the code logic;

The corresponding relationship of each attribute in the animation shorthand attribute:

animation name: animation-name , @keyframes animation name;
Duration: animation-duration , the time it takes for the animation to run a cycle, in seconds/milliseconds;
Motion curve: animation-timing-function , animation running curve, the default ease is ease in and out;
Start time: animation-delay , the time when the animation starts to run, in seconds/milliseconds;
Number of playbacks: animation-iteration-count , animation playback times, default 1 , infinite loop playback infinite ;
Playing direction: animation-direction , animation playing direction, forward/reverse/alternate;
End state: animation-fill-mode , the state after the animation starts and ends;

2. animation Shorthand animation property prompt

When writing animation shorthand animation properties, if you don’t remember the order, you can find the following tips after entering anim,

insert image description here
Then at the first prompt position, press Enter to generate the following code:

animation: name duration timing-function delay iteration-count direction fill-mode;

insert image description here
Then fill in each animation property value according to the above code prompt;

3. Comparison between the abbreviated form of animation properties and the original form

The original code required to set the animation property:

            /* 设置动画名称 之前使用 @keyframes 定义的 element-move 动画 */
            animation-name: element-move;
            /* 设置动画执行时间 2 秒 */
            animation-duration: 2s;
            /* 设置动画运动曲线 ease 缓入缓出 */
            animation-timing-function: ease;
            /* 设置动画开始时间 1 秒后开始 */
            animation-delay: 1s;
            /* 设置动画执行次数 无限循环播放 */
            animation-iteration-count: infinite;
            /* 设置动画播放方向 交替播放 一次正向一次反向 */
            animation-direction: alternate;
            /* 设置动画执行完毕后的状态 回到起始状态 */
            animation-fill-mode: backwards;

Using shorthand for animation, it can be achieved with just one line of code:

            /* 使用简写形式设置动画属性 */
            animation: element-move 2s ease 1s infinite alternate backwards;

4. Code example - shorthand example of CSS3 animation properties