問題我制作了一個簡單的 css 動畫，但它的行為并不符合我的預期。這個想法是讓動畫繪制一條直線（從上向下），然后消失（也是從上向下）。當動畫開始時，線的起點向下移動一點，然后再次向上移動以保持在設定位置（動畫結束時的底部也是如此）。問題如何讓線條的起點停留在一個位置而不是上下“彈跳”？預期行為https://i.stack.imgur.com/NoHZt.gif 實際行為https://i.stack.imgur.com/vqjoU.gif 代碼.lineWrapper {  width: 1px;  height: 300px;  margin: auto;  position: relative;}.lineWrapper .line {  width: 100%;  height: 100%;  background: #000;  animation: scrollLine 5s linear infinite;}@keyframes scrollLine {  0% {    transform: scaleY(0);  }  10% {    transform: scaleY(0);    transform-origin: top;  }  30% {    transform: scaleY(1);  }  70% {    transform: scaleY(1);  }  90% {    transform: scaleY(0);    transform-origin: bottom;  }  100% {    transform: scaleY(0);  }}<div class="lineWrapper">  <div class="line"></div></div>代碼筆https://codepen.io/strazan/pen/RwPYgjq