CSS3 animation (animation)

First, the animation (animation)

1. What is CSS3 animation?

Animation element is the gradual change from one style to another style effect. You can change as many styles as many times.
Animation is CSS3one of the most disruptive characteristics, precise control may be a movie or a group provided by a plurality of nodes, thereby realizing complex animations

2. The basic use of animation

Define animation
In the call to the defined animation

3. syntax (defined animation)

   @keyframes 动画名称 {
       0% {
           width: 100px;
       }
       100% {
           width: 200px
       }
   }

4. syntax (animation)

   div {
   	/* 调用动画 */
       animation-name: 动画名称;
    	/* 持续时间 */
    	animation-duration: 持续时间；
   }

Second, the animation sequence

0% is the beginning of the animation, the animation is done 100%, so the rule is the animation sequence
An item specified in the @keyframs CSS styles gradually changed from the current style created a new style of animation
Animation element is to gradually change from one style to another style effect can be changed any number of times as many styles
A percentage change of the predetermined time, or with fromand toequivalent to 0% and 100%

The sample code

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

@keyframes move {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(1000px, 0)
    }
    50% {
        transform: translate(1000px, 500px);
    }
    75% {
        transform: translate(0, 500px);
    }
    100% {
        transform: translate(0, 0);
    }
}

div {
    width: 100px;
    height: 100px;
    background-color: pink;
    animation-name: move;
    animation-duration: 10s;
}

operation result:
Here Insert Picture Description

Third, the common property of animation

1. Common property
Here Insert Picture Description

Code Example 2

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

   div {
     width: 100px;
     height: 100px;
     background-color: aquamarine;
     /* 动画名称 */
     animation-name: move;
     /* 动画花费时长 */
     animation-duration: 2s;
     /* 动画速度曲线 */
     animation-timing-function: ease-in-out;
     /* 动画等待多长时间执行 */
     animation-delay: 2s;
     /* 规定动画播放次数 infinite: 无限循环 */
     animation-iteration-count: infinite;
     /* 是否逆行播放 */
     animation-direction: alternate;
     /* 动画结束之后的状态 */
     animation-fill-mode: forwards;
   }
   
   div:hover {
     /* 规定动画是否暂停或者播放 */
     animation-play-state: paused;
   }

operation result:
Here Insert Picture Description

Fourth, the animation shorthand

1. Animated shorthand

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

2. Knowledge Points

Shorthand property which does not contain animation-paly-state
Suspended animation animation-paly-state: paused; and often with other mouse after use and so on
To go back to animation, rather than directly transferred back:animation-direction: alternate
After the box animation, stop at the end position:animation-fill-mode: forwards

3. Code Example

   animation: move 2s linear 1s infinite alternate forwards;

Fifth, the speed curve details

1. The speed profile details

animation-timing-function: Specified speed of the animation curve, by defaultease

Here Insert Picture Description

Code Example 2

 <body>
    <div>我是一个字一个字显示</div>
</body>

   div { 
     width: 0px;
     height: 50px;
     line-height: 50px;
     white-space: nowrap;
     overflow: hidden;
     background-color: aquamarine;
     animation: move 4s steps(24) forwards;
   }
   
   @keyframes move {
     0% {
       width: 0px;
     }
   
     100% {
       width: 480px;
     }
   }

operation result:
Here Insert Picture Description

Secretary ~ Summer

Published 270 original articles · won praise 251 · views 20000 +

Private letter concerns