CSS (5): Animation

• animation-name

Animation name
Syntax: animation-name:none|
The animation name defined by the element must be used in conjunction with the rule @keyframes, because the animation name is defined by @keyframes.

• @keyframes

Syntax:
@keyframes {
[from|to|]{sRules}[,*]
}
are called keyframes, which are similar to keyframes in Flash. In CSS3, it mainly starts with "@keyframes", followed by the animation name plus a pair of curly brackets "{...}". In the brackets are some style rules for different time periods.

<span style="color: #008080;">1</span> <span style="color: #000000;">/*定义一个名为"fromLeftToRight"的向右移动的动画*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">@keyframes fromLeftToRight{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    from{margin:0;}
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    to{margin:100px;}
</span><span style="color: #008080;">5</span> }

• animation-duration

Set the duration of animation
Syntax: animation-duration:[,]*

<span style="color: #008080;">1</span> <span style="color: #000000;">/*给div一个名为"fromLeftToRight"的动画效果，并持续一秒时间*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">div{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    animation-name：fromLeftToRight；
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    animation-duration：1s;
</span><span style="color: #008080;">5</span> }

• animation-timing-function

Transition speed type of animation
Syntax: animation-timing-function:ease|linear|ease-in|ease-out|ease-in-out

<span style="color: #008080;">1</span> <span style="color: #000000;">/*给div一个名为"fromLeftToRight"的动画效果，持续一秒时间，并且过渡类型为ease-in*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">div{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    animation-name：fromLeftToRight；
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    animation-duration：1s;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    animation-timing-function:ease-in;
</span><span style="color: #008080;">6</span> }

• animation-delay

Set animation delay time
Syntax: animation-delay: [,]*

<span style="color: #008080;">1</span> /*<span style="color: #000000;">给div一个名为"fromLeftToRight"的动画效果，延迟一秒后执行*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">div{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    animation-name：fromLeftToRight；
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    animation-duration：1s;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    animation-timing-function:ease-in;
</span><span style="color: #008080;">6</span> <span style="color: #000000;">    animation-delay: 1s;
</span><span style="color: #008080;">7</span> }

• animation-iteration-count

Set the number of animation executions
Syntax: animation-iteration-count: infinite|
infinite means unlimited times

<span style="color: #008080;">1</span> /*<span style="color: #000000;">给div一个名为"fromLeftToRight"的动画效果，执行两次后停止*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">div{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    animation-name：fromLeftToRight；
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    animation-duration：1s;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    animation-timing-function:ease-in;
</span><span style="color: #008080;">6</span> <span style="color: #000000;">    animation-iteration-count: 2;
</span><span style="color: #008080;">7</span> }

• animation-direction

Set whether the animation is executed in the reverse order in the loop
Syntax: animation-direction: normal|reverse|alternate|alternate-reverse
Instructions:
normal: normal direction
reverse: run in the reverse direction
alternate: the animation runs normally first and then reverses direction, and continue to run alternately
alternate-reverse: The animation first runs in the reverse direction and then in the forward direction, and continues to run alternately

<span style="color: #008080;">1</span> <span style="color: #000000;">/*给div一个名为"fromLeftToRight"的动画效果，并且反复运行*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">div{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    animation-name：fromLeftToRight；
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    animation-duration：1s;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    animation-timing-function:ease-in;
</span><span style="color: #008080;">6</span> <span style="color: #000000;">    animation-iteration-count: infinite;
</span><span style="color: #008080;">7</span> <span style="color: #000000;">    animation-direction: alternate;
</span><span style="color: #008080;">8</span> }

• animation-fill-mode

Set the start and end status of the animation
Syntax: animation-fill-mode: none|forwards|backwards|both
Description:
none: Default value. The state of the animation is not set
forwards: Set the object state to the state at the end of the animation
backwards: Set the object state to the state at the beginning of the animation
both: Set the object state to the state at the end or start of the animation

<span style="color: #008080;">1</span> <span style="color: #000000;">/*给div一个名为"fromLeftToRight"的动画效果，并且动画结束后元素位于动画结束时的位置*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">div{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    animation-name：fromLeftToRight；
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    animation-duration：1s;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    animation-timing-function:ease-in;
</span><span style="color: #008080;">6</span> <span style="color: #000000;">    animation-iteration-count: 3;
</span><span style="color: #008080;">7</span> <span style="color: #000000;">    animation-fill-mode: forwards;
</span><span style="color: #008080;">8</span> }

• animation-play-state

Set the playback state of animation
Syntax: animation-play-state: running|paused

<span style="color: #008080;"> 1</span> <span style="color: #000000;">/*给div一个名为"fromLeftToRight"的动画效果，并且当div处于hover状态时暂停动画*/
</span><span style="color: #008080;"> 2</span> <span style="color: #000000;">div{
</span><span style="color: #008080;"> 3</span> <span style="color: #000000;">    animation-name：fromLeftToRight；
</span><span style="color: #008080;"> 4</span> <span style="color: #000000;">    animation-duration：1s;
</span><span style="color: #008080;"> 5</span> <span style="color: #000000;">    animation-timing-function:ease-in;
</span><span style="color: #008080;"> 6</span> <span style="color: #000000;">    animation-iteration-count: infinite;
</span><span style="color: #008080;"> 7</span> <span style="color: #000000;">}
</span><span style="color: #008080;"> 8</span> <span style="color: #000000;">div:hover{
</span><span style="color: #008080;"> 9</span> <span style="color: #000000;">    animation-play-state: paused;
</span><span style="color: #008080;">10</span> }

• animation

Abbreviated attributes of animation
Syntax:
animation: [animation-name] || [animation-duration] || [animation-timing-function] || [animation-delay] || [animation-iteration-count] || [ animation-direction ] || || [ ,*]