动画需要先定义，再调用。
1. 定义动画
1）连续动画的定义
1 @keyframes 动画名字 {
2 from {
3 //动画开始之前的状态
4 }
5 to {
6 //动画结局的状态
7 }
8 }
2）分步多状态动画的定义
1 @keyframes 动画名字 {
2 0% {
3 //开始状态
4 }
5 50%{
6 //中间状态
7 }
8 100% {
9 //结束状态
10 }
11 }
2. 调用动画
语法： animation: 动画名称 动画时长 其他属性值;
谁用动画就给谁加调用。
动画名称及动画时长必须有，其他属性值随意且顺序也随意。
将上表做一个分析解释：
- 动画的名字 animation-name: dh;
- 动画的时间 animation-duration: 5s;
- 动画速度曲线（匀速或其他） animation-timing-function: linear; 匀速，默认ease表示缓冲；steps(5) 按步分5次走
- 动画延迟多久后执行 animation-delat: 3s; 默认为0s
- 动画播放次数 animation-iteration-count: 2; 无限次为infinite
- 动画是否逆向播放 animation-direction: alternate; 默认normal
- 动画暂停 animation-play-state: paused; 默认running运动
- 动画结束后的状态 animation-fill-mode: forwards; 保持当前状态，backwords回到起始状态
3. 3D轮播图案例
1 <!-- 3D自动轮播图，鼠标放上的时候暂停轮播 -->
2
3 <style>
4 body {
5 /* 设置透视 */
6 perspective: 600px;
7 }
8 /* 用父盒子包裹3D立方体 */
9 .box {
10 width: 700px;
11 height: 300px;
12 margin: 100px auto;
13 position: relative;
14 transform-origin: center;
15 transform-style: preserve-3d;
16 /* 动画名为dh，总时长5s，无限次匀速播放 */
17 animation: dh 5s infinite linear;
18 }
19 .box img {
20 width: 700px;
21 }
22 .lb {
23 position: absolute;
24 }
25 .lb:nth-child(1) {
26 /* 沿Z方向的位移设置成轮播图图片width的一半 */
27 transform: rotateY(90deg) translateZ(350px);
28 }
29 .lb:nth-child(2) {
30 transform: rotateY(-90deg) translateZ(350px);
31 }
32 .lb:nth-child(3) {
33 transform: rotateY(0deg) translateZ(350px);
34 }
35 .lb:nth-child(4) {
36 transform: rotateY(180deg) translateZ(350px);
37 }
38 @keyframes dh {
39 from {
40 transform: translateZ(-400px) rotateY(0deg);
41 }
42 to {
43 transform: translateZ(-400px) rotateY(360deg);
44 }
45 }
46 .box:hover {
47 /* 鼠标经过时暂停动画 */
48 animation-play-state: paused;
49 }
50 </style>
51 <body>
52 <div class="box">
53 <div class="lb">
54 <img src="images/lb1.png" alt="">
55 </div>
56 <div class="lb">
57 <img src="images/lb2.png" alt=""
58 </div>
59 <div class="lb">
60 <img src="images/lb3.png" alt="">
61 </div>
62 <div class="lb">
63 <img src="images/lb4.png" alt="">
64 </div>
65 </div>
66 </body>
效果：