Css 为什么要将div设置为向上移动，然后以跳跃结束？

我正在学习动画，并尝试使

div

（其中包含

输入

）向上移动，然后向右移动

向上的过渡看起来既漂亮又平滑。但是，向右的过渡“跳跃”，并在较高的点结束（相对于前一个状态）

我做错了什么

代码：

.container{
最高：30%；
位置：绝对位置；
动画：移动5s1；
}
输入{
宽度：100px；
高度：10px；
}
@关键帧移动{
0% {
最高：30%；
}
50% {
排名前10%；
}
100% {
排名前10%；
左：20%；
}
}

---

问题是您的

左侧

没有已知的起始位置，因此它没有已知的开始动画的位置。请尝试以下操作：

.container{
最高：30%；
左：0%；
位置：绝对位置；
动画：移动5s1；
}
输入{
宽度：100px；
高度：10px；
}
@关键帧移动{
0% {
最高：30%；
左：0%；
}
50% {
排名前10%；
左：0%；
}
100% {
排名前10%；
左：20%；
}
}