title: How to fix animation lowering my header height?
body: <p>The animation lowers the height of the h1 and then once the animation is completed, it snaps back into position. </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>       .main-header {
              position: absolute;
              top: 40%;
              left: 50%;
              transform: translate(-50%, -50%);
          
              animation-name: moveInLeft;
              animation-duration: 1s;
              animation-timing-function: ease-out;
          }
          
          .wrap {
              background-color: gray;
              height: 90vh;
          }
          
          
          
          @keyframes moveInLeft {
              0% {
                  opacity: 0;
                  transform: translateX(-100px);
              }
          
              80% {
                  transform: translateX(10px);
              }
          
              100% {
                  opacity: 1;
                  transform: translate(0);
              }
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>      
    &lt;header class="wrap"&gt;  
        &lt;h1 class="main-header"&gt;
            This is a header
        &lt;/h1&gt;
    &lt;/header&gt;  </code></pre>
  </div>
  </div>
  </p>