title: CSS Animate image reveal
body: <p>I have a graph that I would like to animate using CSS if possible. The way I see myself doing it would be to use a mask so it starts with nothing and then slowly the mask goes across gradually revealing the graph line.</p>
  
  <p>This isn't the image I'm using but will be similar:
  <a href="http://jsfiddle.net/e50mnm2p/" rel="nofollow">http://jsfiddle.net/e50mnm2p/</a></p>
  
  <p>So imagine it starts off with nothing and then from the left it will gradually reveal the green line giving the impression it's being drawn. Is there a way of doing this with masks or is there a better alternative?</p>
  
  <pre><code>&lt;img src="http://www.freeimages.com/assets/183018/1830173156/graph-line-up-and-down-1-1131299-m.jpg" /&gt;
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>This is what I ended up doing:
  <a href="http://jsfiddle.net/e50mnm2p/5/" rel="nofollow">http://jsfiddle.net/e50mnm2p/5/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="hgInner"&gt;
      &lt;img src="http://www.freeimages.com/assets/183018/1830173156/graph-line-up-and-down-1-1131299-m.jpg" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.hgInner {
      position: relative;
      float: left;
      height: 100%;
      width: 955px;
      overflow: hidden;
      -webkit-animation: reveal 4s ease;
      -webkit-animation-fill-mode: backwards;
  }
  
  @-webkit-keyframes reveal {
      0%   {width: 0px;}
      100% { width: 100%;}
  }
  @keyframes reveal {
      0%   {width: 0px;}
      100% { width: 100%;}
  }
  </code></pre>