有没有办法获得平滑的 css 关键帧动画？

Question

我正在尝试制作一个加载图标，其中一条线在 z 轴上连续来回移动。线条在移动，但我没有得到平滑的过渡。

    .loading{
      width: 50%;
      border: 1px solid black;
      height: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .line{
      border: 1px solid red;
      width: 20px;
      height: 140px;
      animation: round 2s infinite;
    }
    @keyframes round{
      25%{
        margin-right: -300px;
        height: 75px;
      }
      50%{
        height: 50px;
        width: 7px;
      }
      75%{
        margin-right: 300px;
        height: 75px;
      }
      100%{
        height: 140px;
      }
    }

  <div class="container">
    <div class="loading">
      <div class="line"></div>
    </div>
  </div>

当线条到达主要位置时它会停止然后开始移动，如何获得线性动画。

Answer 1

对于linear 缓动动画，请点赞

infinite linear;

为了性能，不要使用边距或位置属性。请改用transform: translate(x, y)。

PS：Z轴通常表示深度...