Есть ли способ получить плавную анимацию ключевых кадров 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 обычно выражается для глубины ...