title: Is there a way to get smooth css keyframes animation?
body: <p>I am trying to make a loading icon, In which a line continuously move back and forth in z axis. The lines are moving but I am not getting smooth transitions.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .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;
        }
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div class="container"&gt;
      &lt;div class="loading"&gt;
        &lt;div class="line"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <blockquote>
    <p>When line comes to main position it kind of stop and then start moving, how to get linear animation.</p>
  </blockquote>