title: How to start a css animation from current position
body: <p>I would like to start the animation (the first time) from the current position.
  the openAnimation goes from the point A to point B and the closeAnimation goes from the point B to the point A.
  So, at page loading, the animation is suppose to be in the point B.
  but when for the first time I change the class, the div starts from the point A.</p>
  
  <pre><code>@-webkit-keyframes openAnimation
    0%
      -webkit-transform: translateX(300px)
    100%
      -webkit-transform: translateX(0px)
  
  @-webkit-keyframes closeAnimation
    0%
      -webkit-transform: translateX(0px)
    100%
      -webkit-transform: translateX(300px)
  </code></pre>
  
  <p>in the .open class</p>
  
  <pre><code>-webkit-transform-origin: 100% 50%
  -webkit-animation: openAnimation 1s both ease-in
  </code></pre>
  
  <p>in the .close class</p>
  
  <pre><code>-webkit-transform-origin: 100% 50%
  -webkit-animation: closeAnimation 1s both ease-in
  </code></pre>
  
  <p>what can I do for don't see the animation the first time?</p>