title: CSS Animation from right to left dynamically
body: <p>The problem I'm facing is:</p>
  
  <ul>
  <li>I have a animated text which goes from right to left, this text change depending on the languague set, what is causing that the total width of the text changes too.</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/FWyqa.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FWyqa.gif" alt="Working fine"></a></p>
  
  <p>In this picture, the effect I want is working fine, because some properties are fixed.</p>
  
  <p><a href="https://i.stack.imgur.com/9kAtI.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9kAtI.gif" alt="enter image description here"></a></p>
  
  <p>Now, when I change for a longer text the problem cames up.</p>
  
  <p>So, this is what I have now:</p>
  
  <p><a href="https://i.stack.imgur.com/5huRi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5huRi.png" alt="enter image description here"></a></p>
  
  <p>And this is what I'd like to have:</p>
  
  <p><a href="https://i.stack.imgur.com/gO72h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gO72h.png" alt="enter image description here"></a></p>
  
  <p>Here is the code I'm using:</p>
  
  <p><strong>ReactJS Side:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>constructor(props) {
    super(props);
  
    this.state = {
      checked: false
    }
  }
  
  componentDidMount() {
    window.addEventListener('scroll', () =&gt; {
      if (event.srcElement.body.scrollTop &gt;= 1400) {
        this.setState({ checked: true });
      }
    });
  }
  
  render() {
    return (
      &lt;div&gt;
        ... stuff
        &lt;span style={{ fontSize: "40px", color: this.state.theme.COLOR_3 }}&gt;
          &lt;input type="checkbox" id="Resume-chk" style={{ display: "none" }} checked={this.state.checked} /&gt;
          &lt;b id="Resume-title"&gt;{this.state.languageSet.RESUME}&lt;/b&gt;
        &lt;/span&gt;
        ... more stuff
      &lt;div&gt;
    );
  }
  </code></pre>
  
  <p><strong>CSS Side:</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>//This is the text
  #Resume-title {
    display: inline-block;
    -webkit-transition: color 200ms ease-in;
    -moz-transition: color 200ms ease-in;
    transition: color 200ms ease-in;
  
    -webkit-transition: right 500ms ease-in;
    -moz-transition: right 500ms ease-in;
    transition: right 500ms ease-in;
  
    position: relative;
    right: -40.5%;
  }
  
  //This is the text when the checkbox is checked
  #Resume-chk:checked ~ #Resume-title {
    right: 40.5%;
  }
  </code></pre>
  
  <p>So, the question is: <strong>How to fix it?</strong> Or maybe there is some concept I'm missing and it is a little bit more than just fixing a bug.</p>
  
  <p>Also I'm not sure if doing things like <code>right: -40.5%;</code> and <code>right: 40.5%;</code> is a good practice, but I cant find a way to animate property like <code>float</code> or <code>align</code>.</p>
  
  <p>Of course, if there is a way to fix it, but also there is a way to do it even better, It is also welcome!!!</p>
  
  <p>EDITED: <a href="http://codepen.io/facundo_larocca/pen/XpMyar" rel="nofollow noreferrer">here</a> the fiddle containing the whole html section, copied from dev console</p>