title: CSS Animate text from left to right in div container with overflow hidden
body: <p>So i've recently working on some private project, and since i am a huge CSS fan i want to do most of the animations in CSS rather than in JavaScript.</p>
  
  <p>Today i wanted to create something like this:
  <a href="http://i.stack.imgur.com/qOi7e.jpg" rel="noreferrer">Text moving from left to right</a></p>
  
  <p>I think this might be possible with CSS Animations. In theory, I have a div wrapper with position:relative, a fixed width and overflow:hidden. Inside, there is a div with position:absolute and left:0 and bottom:0. Now in some cases, the text is too long for the parent div, and i wanted to let text text "float" though the parent div: actually animating the div from left:0 to right:0.</p>
  
  <p>I stumbled upon some CSS Animations and tried this </p>
  
  <pre><code>@keyframes floatText{
    from {
      left: 0;
    }
  
    to {
      right: 0;
    }
  }
  </code></pre>
  
  <p>on the child div. And of course this didn't worked. Animations like from left :0 to left: -100px work, but this doesn't ensure that the whole text is visible, when it is longer than those additional 100px. Is there a nice and clean way to make this work? Surely JavaScript might rock this desired functionality. But I'd wanted to know if there is a way to do this in pure CSS.</p>
  
  <p>Thanks in advance!</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>To clearify what I have in my mind, i've created a gif displaying what i want to accomplish with CSS animations:
  <a href="http://i.stack.imgur.com/ZdA7N.gif" rel="noreferrer">Animated</a></p>
  
  <p>As you see, we have three of that kind next to each other, some have a name which fits directly, some others might be too long and should be animated forth and back, so the user can read it :)!</p>
  
  <p>Thanks again!</p>
  
  <p><strong>EDIT2:</strong></p>
  
  <p>Is there a way to accomplish something like this?</p>
  
  <pre><code>@keyframes floatText{
    from {
      left: 0px;
    }
  
    to {
      left: (-this.width+parent.width)px;
    }
  }
  </code></pre>
  
  <p>This would be the ultimate solution, I know that this kind of coding is not possible in CSS, but maybe with some CSS3 tweaks like calc() or something? I'm out of ideas now :(</p>