A Pen by Mark.

index.html

<div class="cointainer">
  <figure class="hiddenImage">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/FrigilianaPano3.jpg/640px-FrigilianaPano3.jpg" alt="Andalusia, Spain">
    <figcaption class="imageCaption">View of Frigiliana, a town in Andalusia, Spain.</figcaption>
  </figure>
  <div class="square" id="mainSquare"></div>
</div>

script.js

document.getElementById("mainSquare").addEventListener ("webkitAnimationStart", function() {
  setTimeout(function() { 
    document.getElementsByClassName('hiddenImage')[0].style.visibility = 'visible';
    setTimeout(function() { 
      document.getElementsByClassName('imageCaption')[0].style.opacity = 1;
    }, 1000);
  }, 2400);
});

style.css

body {
  background-color: #3c1b52;
}

.cointainer {
  width: 20px;
  height: 20px;
  margin: 150px auto 0;
  position: relative;
}

.hiddenImage {
  position: absolute;
  left: -200px;
  top: -150px;
  visibility: hidden;
  margin: 0;
}

.hiddenImage img {
  width: 400px;
  height: 150px;
}

.imageCaption {
  color: #CCC;
  font-family: sans-serif;
  opacity: 0;
  transition: opacity 1s;
}

.square {
  width: 20px;
  height: 20px;
}

#mainSquare {
  background-color: #fff;
  -webkit-animation: move 4s 1s;
  -webkit-transform: translate(200px, 0);
}

@-webkit-keyframes move {
  6% {
    padding-right: 200px;  
  }
  10% {
    -webkit-transform: translate(-200px, 0);
    padding-right: 200px;
  }
  16% {
    -webkit-transform: translate(-200px, 0);
    padding-right: 0;
  }
  30% {
    -webkit-transform: translate(-200px, -150px);
    width: 20px
  }
  40% {
    -webkit-transform: translate(-200px, -150px);
    width: 400px;
    height: 20px;
  }
  60% {
    -webkit-transform: translate(-200px, -150px);
    height: 150px;
  }
  65% {
    -webkit-transform: translate(-200px, -150px);
    height: 150px;
  }
  80% {
    -webkit-transform: translate(-200px, 0);
    width: 400px;
    height: 20px;
  }
  100% {
    -webkit-transform: translate(200px, 0);
    width: 20px;
    height: 20px;
  }
}

Unveiling-image---animation.markdown

Unveiling image - animation

It's not as smooth as I expected but works quite nice.

A Pen by Mark on CodePen.

License.