css 动画效果中如何实现突变？

Question

-------------------------------------------------
↑            ↑ 

如上，有两个小箭头需要依次从左到右进行移动
箭头a可以设置css实现

@keyframes move1{
0%{left: 0}
100%{left: 100px}
}

---

但是箭头b想要实现先从30%位置移动到100%，再从0开始移动到30%
如果按照上面的思路

@keyframes move2{
0%{left: 30px}
69%{left: 100px}
70%{left: 0px}
100%{left: 30px}
}

69 -> 70之间会瞬间从100px移回0，但是不知道怎么写能够直接定位到0，而不增加动画效果 有什么办法吗？
或者不用keyframes实现？

想到一个办法是给箭头b加30%时间的延时，用move1的keyframes，但是会导致一开始的时候都挤在最前面

Answer 1

可以通过设置 负数的延时(animation-delay) 属性来达到提前开始的效果。
比如说

<div class="block"></div>
<div class="block start3"></div>

@keyframes move{
  0% {
    left: 0
  }
  100% {
    left: 100px
  }
}
.block{
  animation: 10s linear;
}
.start3{
  animation-delay: -3s
}

哦，如果说你要从 30% 然后进行到 100% 之后回 0% 然后再继续到 30% 停止的话。

就和楼上说的一样了，需要单独写动画，就不能使用同一个CSS动画了，
回归的时候设置透明或者移动到容器外部再回到初始位置，类似于这样的路径：

---

相关阅读
animation-delay - CSS（层叠样式表） | MDN

Answer 2

楼上 @陟上晴明 没问题的啊
html:

css:

效果：

然后用 animation-play-state 来做停止：
https://developer.mozilla.org...

Answer 3

https://jsbin.com/menixivuse/...,output
https://jsbin.com/borajuloli/...,output
可以加个opacity来隐藏右到左的动画过程