css 动画效果中如何实现突变？
站长
· 阅读数 17
-------------------------------------------------
↑ ↑ 如上，有两个小箭头需要依次从左到右进行移动箭头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，但是会导致一开始的时候都挤在最前面
回复
1个回答
test
2024-07-16
可以通过设置 负数的延时(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动画了，回归的时候设置透明或者移动到容器外部再回到初始位置，类似于这样的路径：
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引，对解决问题有帮助
- 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容