title: Animate block back and forth within div continuously with CSS3 keyframes
body: <p>I'm trying to animate a span that moves back and forth enclosed within a div using CSS3 keyframes. Ideally, I'd like the keyframes to look something like this:</p>
  <pre class="lang-css prettyprint-override"><code>@-webkit-keyframes backandforth {
       0% {text-align:left;} 50%{text-align:right;} 100%{text-align:left;}
  }
  </code></pre>
  <p><a href="http://jsfiddle.net/dofykw02/1/" rel="nofollow noreferrer"><strong>Demo in JSFiddle</strong></a></p>
  <p>But since it's not possible to animate text-align, I've been searching for an alternative property that can be animated to reach the desired positioning. That's where I'm stuck at.</p>
  <p>I tried setting the left property to 100% midway through the animation, but that ended up pushing the span off the div. I also tried animating the float property, but that didn't work.</p>
  <p>Then I saw this question on <a href="https://stackoverflow.com/questions/10679367/css-moving-text-from-left-to-right">moving text from left to right</a> and tried the JSFiddle from the top answer. While it looks like the solution, it unfortunately did not work for me since I want my animation to move continuously at ease, and for the last few seconds of that animation, the span stalls.</p>