title: How to animate header background image onload event?
body: <p>I want my header background image should animate on load. And I have done this</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>.header_area{
      background-image: url(../img/mobility_solutions.jpg);
      min-height: 100vh;
      background-repeat: no-repeat; 
      background-size: 100% 100%;
      background-position: center center;
      animation: shrink 3s;
  }
  
  @keyframes shrink {
      0% {background-size: 110% 110%;}
      100% {background-size: 100% 100%;}
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is working but not when the page is loading for the first time in a browser. How can I align it to happen on load event always? </p>
  
  <p>You can check it here- <a href="http://demogenesystel.mywebkitchen.com/" rel="nofollow noreferrer">http://demogenesystel.mywebkitchen.com/</a></p>