css3出现以后，css的动画就使用的特别广泛，下面是我在使用css3动画的一些理解。

css3动画的基础用法

1
2
3
4
5
6
7
8
9
@keyframes 动画名称{
  动画的操作属性
}
使用动画的标签{
  animation-name:动画名称;/*需要执行的动画的名字*/
  animation-duration: 3s;/*所需要的时间*/
  animation-iteration-count: infinite;/* 执行次数*/
  ...
}

css3动画的基础属性

下面是对具体值的解释：

类别 属性值 作用
曲线速率 linear 匀速线性运动
曲线速率 steps(数字) 逐帧动画(一般配合精灵图使用）
曲线速率 ease-in-out 慢速开始和结束
动画次数 number 定义运动的次数，默认是一次
动画次数 infinite 无限运动
动画方向 alternate 逆向运动(运动次数需要大于1才能看出效果)
动画终点 none(默认值) 默认终点是原点
动画终点 forwards 在运动结束的之后，停到结束位 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
## 示例演示：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动画示例演示</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: #550000;
      margin: 100px auto;
      color: white;
      border-radius: 50%;
      padding: 10px;
      text-align: center;
      animation: ani 3s 2 linear forwards alternate;
      
    }
    .box:hover {
      animation-play-state: paused;
    }
    @keyframes ani {
      form {}
      to {
        transform: translateY(400px);
      }
    }
  </style>
</head>
<body>
  <div class="box">
    <h2>动画示例演示</h2>
  </div>
</body>
</html>