title: CSS Transition Transform: Sliding element one way, and having it slide back in from the opposite direction
body: <p>I'm wanting to animate the slide of <code>span</code> to the left, than when transition stops, have it instantly move to another position without transition, and then afterwards slide it back into it's original position with transition. I must use CSS for the animation, not JS.</p>
  
  <p>My problem is once I've animated the span to the left, and had it instantly go move, I cannot transition back into position.</p>
  
  <p>Here's an example (click the span to animate): <a href="http://jsbin.com/tosaxedura/3/edit" rel="nofollow">http://jsbin.com/tosaxedura/3/edit</a></p>
  
  <pre><code>body, html, div {
      display:block;
      width:100%;
      height:100%;
      margin:0;
      padding:0;
  }
  div {
      background:black;
      display:block;
      height:200px;
      width:200px;
      margin:0 auto;
  }
  span {
      display:block;
      height:inherit;
      width:inherit;
      background:red;
      transition:transform 275ms cubic-bezier(0.470, 0.000, 0.745, 0.715), opacity 275ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
  }
  
  $('body').on('click', 'span', function () {
  
      var self = $(this);
  
      self.css('transform', 'translateX(-100%)').css('opacity', '0.5');
  
      self.one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function (e) {
  
          self.css({
              'transition-duration': '0',
                  'transform': 'translateX(100%)'
          });
  
  
  
          // move back into original position (overlaying the black) with animation   
          self.one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function (e) {
  
              //self.css('transition-duration', '');
              //self.removeAttr('style');
  
          });
  
      });
  
  });
  </code></pre>