在 css 动画中实现突变：如何定位到特定的位置
在 css 动画中实现对象的突变效果是需要考虑的问题。当我们需要对象从 69% 的位置突然移动到 0% 时，直接使用 keyframes 动画会造成从 100px 瞬移回 0px 的效果。
要解决这个问题，我们可以使用负数的 animation-delay 属性来实现提前开始动画的效果。例如，给 html 元素设置：
css 样式如下：
立即学习“前端免费学习笔记（深入）”；
@keyframes move {
0% {
left: 0
}
100% {
left: 100px
}
}
.block {
animation: 10s linear;
}
.start3 {
animation-delay: -3s
}这样，带有 start3 类的元素会在动画开始 3 秒后从 0% 位置移动到 100% 位置。
如果需要对象从 30% 位置移动到 100%，然后再返回到 0%，则需要使用单独的动画来实现：
@keyframes move1 {
0% {
left: 30%
}
50% {
left: 100%
}
}
@keyframes move2 {
0% {
left: 100%
}
50% {
left: 0
}
}
.block {
animation: move1 5s, move2 5s;
}这种方法需要单独编写动画，并在特定时间点之间创建平滑的过渡。
