# 动画线性时间曲线

animation-timing-function是控制时间的属性常见的属性有

# `steps` 属性

animation 默认以 ease 方式过渡它会在每个关键帧之间插入补间动画所以动画效果是连贯性的
关键帧之间的跳跃 则需要使用steps过渡方式

steps的测试案例

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    div {

      height: 100px;
      position: absolute;
      left: 0;
    }

    .div_static {
      width: 600px;
      background-color: #000000;
      top: 10%;
    }

    .div_move {
      width: 100px;
      animation: melon 3s infinite steps(3);
      /*animation: melon 2s infinite step-start;*/
      top: 30%;
      background-color: #87CEEB;
    }

    @keyframes melon {
      0% {
        left: 0;
      }

      20% {
        left: 100px;
      }

      40% {
        left: 200px;
      }

      60% {
        left: 300px;
      }

      80% {
        left: 400px;
      }

      100% {
        left: 500px;
      }
    }
  </style>
</head>

<body>
  <div class="div_static"></div>
  <div class="div_move"></div>
</body>

</html>

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

# 总结

steps(x,start|end) 的第一个参数是指时间函数中的间隔数量(必须是正整数)
steps(start,x) 是指在第一步中又一次分割 x 次进行动画而不是指从第 x 开始执行也不是指整个动画的变化次数
step-start 等同于 steps(1,start) 会忽略第一步即从第二步开始执行直到最后
step-end 等同于 steps(1,end) 会忽略最后一步即从第一步开始执行直到倒数第二步
step的工作机制图
最后再次强调:timing-function 作用于每两个关键帧之间，而不是整个动画

# 动画线性时间曲线

# steps 属性

# 总结

# `steps` 属性