title: Flip div after css3 animation loop reaches to 100% and flip back when it came to 0%, without jquery
body: <pre><code>div{
      animation: fly 5s linear infinite;
      animation-direction: alternate;  
   }
  
  @keyframes fly {
      0% {  left:0px; }
      100% { left:100%; }
    }
  </code></pre>
  
  <p>I have a code to animate the div in a loop that is infinite i just want to flip the div with   <code>transform:scaleX(-1);</code>
  When animation reaches to 100% of left and flip back to <code>transform:scaleX(1);</code> when it again came to 0%.</p>
  
  <p>i am trying to use transform:scaleX(-1) on keyframe but it also animate with the fly animation.
  Something like this :
                 <a href="http://projects.ashishmishra.com/win8apps/example_div.gif" rel="nofollow">Click link to see the sample</a></p>