Html CSS动画未按预期运行 问题

我已经制作了一个简单的css动画，但它的行为并不像我预期的那样。 动画的想法是画一条直线（从上往下），然后消失（也从上往下）

当动画开始时，线的起点向下移动一点，然后再次向上移动以保持在设定位置（动画末尾的底部也是如此）

问题: 我如何让线的起点保持在一个位置，而不是上下跳动

预期行为

实际行为

代码

.lineWrapper{
宽度：1px；
高度：300px；
保证金：自动；
位置：相对位置；
}
.lineWrapper.line{
宽度：100%；
身高：100%；
背景：#000；
动画：滚动线5s线性无限；
}
@关键帧滚动线{
0% {
变换：scaleY（0）；
}
10% {
变换：scaleY（0）；
变换原点：顶部；
}
30% {
变换：scaleY（1）；
}
70% {
变换：scaleY（1）；
}
90% {
变换：scaleY（0）；
变换原点：底部；
}
100% {
变换：scaleY（0）；
}
}

---

默认的

变换原点

为中心，因此如果在初始和最后一个状态中忽略它，它将设置为中心。您还需要立即更改中间的

变换原点

：

.lineWrapper{
宽度：1px；
高度：300px；
保证金：自动；
位置：相对位置；
}
.线路{
身高：100%；
背景：#000；
动画：滚动线5s无限；
}
@关键帧滚动线{
0%,10% {
变换：scaleY（0）；
变换原点：顶部；
}
49.9% {
变换：scaleY（1）；
变换原点：顶部；
}
50% {
变换：scaleY（1）；
变换原点：底部；
}
90%,100% {
变换：scaleY（0）；
变换原点：底部；
}
}

---

我用一些不同的代码行制作了类似的CSS动画

正文{
边际：0px；
显示器：flex；
证明内容：中心；
背景：黑色；
溢出：隐藏；
}
.线包装器{
高度：800px；
宽度：8px；
背景：tranparent；
显示器：flex；
证明内容：中心；
动画：下2s线性无限；
}
@关键帧向下{
0% {
变换：translateY（0px）；
}
15% {
变换：translateY（0px）；
}
30% {
变换：translateY（0px）；
}
60% {
变换：translateY（90px）；
}
90% {
转换：translateY（115px）；
}
100% {
转换：translateY（115px）；
}
}
.线路{
高度：8px；
宽度：4px；
背景：灰色；
动画：滚动线2s轻松输入输出无限；
}
@关键帧滚动线{
100% {
高度：800px；
}
}
.橡皮擦{
高度：0px；
宽度：4px；
背景：黑色；
动画：rmv 2s线性无限；
}
@关键帧rmv{
55% {
高度：0px；
}
100% {
高度：800px；
}
}

---

Aaah！我现在明白了！非常感谢D