JSFiddle - React, Tailwind, and code Playground

HTML

<div class="reveal open">
    <p>Main content</p>
  </div>

CSS

* {
  margin: 0;
  padding: 0;
}

.reveal {
  width: 380px;
  height: 660px;
  margin: 50px;
  float: left;
}

@keyframes opening {
    0% {
          background: url(http://uploadir.com/u/9btuxs9t) 0px 330px, url(http://uploadir.com/u/9btuxs9t) 0px -405px, #42413C;
    }
    100% {
       background: url(http://uploadir.com/u/9btuxs9t) 0px 660px, url(http://uploadir.com/u/9btuxs9t) 0px -735px, #42413C;
    }
}

@keyframes opening-p {
    0% {
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      opacity: 0;    
    }
    100% {
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=100);
      opacity: 1;
    }
}

.open {
    background: url(http://uploadir.com/u/9btuxs9t) 0px 330px, url(http://uploadir.com/u/9btuxs9t) 0px -405px, #42413C;
  background:no-repeat;
  -webkit-transition: background-position 0.3s ease;
  -moz-transition: background-position 0.3s ease;
  -o-transition: background-position 0.3s ease;
  -ms-transition: background-position 0.3s ease;
  transition: background-position 0.3s ease;
  animation-name: opening;
  animation-iteration-count: 1;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.reveal p {
  font: 45px/300px Helvetica, Arial, sans-serif;
  text-align: center;
  cursor:pointer;

  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
    
  animation-name: opening-p;
  animation-iteration-count: 1;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}