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

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

如上,有两个小箭头需要依次从左到右进行移动
箭头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,但是会导致一开始的时候都挤在最前面

回复
阅读 1k
3 个回答

可以通过设置 负数的延时(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动画了,
回归的时候设置透明或者移动到容器外部再回到初始位置,类似于这样的路径:
image.png


相关阅读
animation-delay - CSS(层叠样式表) | MDN

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏