JSFiddle - React, Tailwind, and code Playground

by Lakshman Kambam

HTML

<div class="scroll-down">
  <div></div>
</div>

CSS

.scroll-down {
  height: 400px;
  width: 100%;
}

.scroll-down > div{
  height: 0px;
  background-image:url(http://enod.fr/wp-content/uploads/2016/05/home.jpg);
  background-size: 100%;
  animation-name: scrolldown;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes scrolldown {
  from {
    height: 0px;
    opacity: 0;
  }
  
  to {
    height: 400px;
    opacity:1;
  }
}