让圆圈在起点停留2s那是表象说法，转化成我们的动画定义语言，就是在4s动画周期内前2s是没有动画效果的。所以，动画规则我来这样定义：
@keyframes move{
0%{transform:translateX(0)}
50%{transform:translateX(0px)}
100%{transform:translateX(800px)}
}对照上面时间轴的分割来看，更容易理解一些，这样就得到了在起点处停留2s后，在后面的2s完成整个动画的动效。这里亦或用一种更简单的写法为
0%, 50%{transform:translateX(0)} ，属性相同的可以合并在一起，用逗号分隔。 case-关键帧演示-延迟开始
3.提前结束
有了延迟开始的基础，提前结束是不是已经可以类推出来了。为了区分一下，我让动画提前3s结束。照例先画出时间轴的解析。
对应关键帧的定义如下：
@keyframes move{
0%{transform:translateX(0)}
25%，100%{transform:translateX(800px)}
}最终结果圆圈一定是4倍速度全力以赴加速完成旅程（毕竟要把原来4s的时间压缩到1s完成），然后怡然自得的在终点等待整个动画时间结束。 case-关键帧演示-提前结束
4.中途停留
那些已准备妥当的驿站，现在可以发挥作用了，我希望圆圈这样运动：整个旅程中仅在第一个驿站（移动200px后）停留1s，稍作整顿。映射到时间轴上是什么样子的呢？
这里，出现了一些看上去很奇怪的数字，需要解释一下。先来明确一点，我们分析时间轴，最终要获得是时间节点。针对我们的设计，停留1s，那运动的时间就是3s，而这3s的时间是分成两部分的，第一部分是前200px，第二部分是后600px，因为是线性匀速，所以当时间轴分成A+B+C三部分后，在A时间段跑完200px，在C时间段跑完600px，计算出A对应的时间0.75s，C对应的时间2.25s，B的时间是停留的时间1s，再换算成对应的百分比，这就是最终中间两个时间节点的计算方法。时间轴解析完成后，CSS部分的定义手到擒来：
