title: CSS3 maintain final animation keyframe if below 100% progress
body: <p>I am animating a div using a zoom in effect, when scrolling to it.</p>
  <p>First I am setting the div to opacity 0 because I want it hidden until I scroll to it:</p>
  <pre><code>div {
    opacity: 0;
  }
  </code></pre>
  <p>In my JS, when the element enters the viewport/screen, I am adding class <code>zoomIn</code> to it.</p>
  <pre><code>@keyframes zoomIn {
       0% {
           opacity: 0;
           transform: scale3d(0.3, 0.3, 0.3);
  
       }
       50% {
           opacity: 1;
       }
   }
  
   .zoomIn {
       animation-name: zoomIn;
       animation-fill-mode: forwards;
   }
  </code></pre>
  <p>The issue:</p>
  <p>After the animation finishes, the div goes back to opacity 0.</p>
  <p>A solution I found:</p>
  <pre><code>@keyframes zoomIn {
       0% {
           opacity: 0;
           transform: scale3d(0.3, 0.3, 0.3);
  
       }
       50% {
           opacity: 1;
       }
       100% {
           opacity: 1;
       }
   }
  </code></pre>
  <p>I am adding 100% to keyframes to maintain the opacity 1.</p>
  <p>Is there a way to accomplish this without adding <code>100%</code> to the keyframe? Can I just preserve the opacity at 50%?</p>
  <p><strong>Note:</strong> I must use keyframe 50%. The above animation is a simplified example. The goal is to find out how to maintain the state in the last keyframe whether it's 50% or any other value below 100%.</p>