title: Reveal div CSS3 animation
body: <p>I want to do CSS3 animation like</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>@keyframes ImageAnimation {
      0% 
      {
          width:100%;
          opacity:1;
      }
     100% 
      {
          width:0;
          opacity:0;
      }
  }
  
  .ImageAnimation {
      position: absolute;
      top: 0;
      width: 0;
      height: 100%;
      right:0;
      overflow:hidden;
      animation: ImageAnimation 2s forwards;
  }
  .ImageAnimation img{
      width:100%;
      height:100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="ImageAnimation"&gt;
   &lt;img src="http://www.w3schools.com/css/img_fjords.jpg" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am overlapping this div on another div which contain same image with some changes. I want to reveal below div with CSS3 animation, but I don't want to compress image while transition. </p>