@keyframes move{
0%{transform:translateX(0)}
18.75%, 43.75%{transform:translateX(200px)} /*对应停留的1s*/
100%{transform:translateX(800px)}
}
case-关键帧演示-第一个驿站停留1s
5.像虫洞一样跳跃式前进
增加些难度，在中途任意点作停留已经不是什么问题了，停留在一个点和多个点是相同的思路，现在，我让圆圈跳跃式前进，进入第一个驿站后，停留1s，跨过第二个驿站，直接进入第三个驿站，停留1s，完成旅程。根据空间折叠原理，200和600处发生了跃迁。分析时间轴：
重点看红色的部分，那里就是跃迁的时间点，在无时间变化的情况下位移了200px。按照时间轴的分析，CSS部分理论上是这样的：
@keyframes move{
0%{transform:translateX(0)}
25%,50%{transform:translateX(200px)}
50%,75%{transform:translateX(600px)}
100%{transform:translateX(800px)}
}效果如何呢？
完全和想象的不一样，问题出在哪里呢？就是时间的50%节点处，浏览器可不知道你真实的想法，它只会以为你定义错了，当有两个相同的50%的关键帧的不同属性值定义时，会自动忽略第一个，而以最后一个有效值为准，所以上面的定义相当于给浏览器传达的讯息是这样的：
@keyframes move{
0%{transform:translateX(0)}
25%{transform:translateX(200px)}
50%,75%{transform:translateX(600px)} /*在位移600px后停留1s*/
100%{transform:translateX(800px)}
}这就是为什么看上去是到达第一驿站后加速跑向第三个驿站，然后停留后再完成剩下的路程的原因。现在游戏越来越有意思了，或许我们可以试试 骗过浏览器 。既然同样的时间点只允许定义一个属性值，那如果我在紧邻的旁边增加一个时间点来定义，会发生什么？
@keyframes move{
0%{transform:translateX(0)}
25%,50%{transform:translateX(200px)}
50.0001%,75%{transform:translateX(600px)}
100%{transform:translateX(800px)}
}看上面出现的**50.0001%**这个时间点，猜猜发生了什么？这就是上面所谓的“骗过浏览器”的方法了。在50%→50.0001%这个区间，发生了400px（200→600）的位移变化。所以就得到了下面这种效果：case-关键帧演示-跃迁
