Why does my Transform snap back?

Question

Am trying to make my element stay in spot (after the transition). Right now, the translated location is where I want it but then my name snaps back onto the quote. Am I miss

Answer 1

oops - i just read your question again. This example makes the name snap back in front at the end of the animation and stay there. I thought that's what you wanted.

Ok so the transition will never remain in the hover state. I've made one here using animation - http://codepen.io/Haelu/pen/qdLxao

-webkit-animation: authoranim 250ms ease-in-out normal forwards;
  animation: authoranim 250ms ease-in-out normal forwards;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;

@-webkit-keyframes authoranim {
  0% {
    -webkit-transform: translateX(0px);
    opacity:0;
  }
  50% {
    -webkit-transform: translateX(210px);
    opacity:1;
  }
  90% {
    -webkit-transform: translateX(200px);
  }
  100% {
    -webkit-transform: translateX(0px);
  }

  @-keyframes authoranim {
  0% {
    transform: translateX(0px);
    opacity:0;
  }
  50% {
    transform: translateX(210px);
    opacity:1;
  }
  90% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0px);
  }

This isn't exactly the same as what you had, but maybe you can refine it. Add another set of keyframes to animate the blockquote div to the left, and add a value for font-weight into the existing animation I made.

I'm pretty sure -webkit- is the only prefix needed now as most modern browsers will run the code without that, so you can see everything is duplicated using that prefix.

I hope this helps.

The only other thing is that if the mouse is moved outside the div before the animation finishes then it will go back to 'paused' in mid-animation.

For more info on animations, including the order of shorthand code - http://www.w3schools.com/cssref/css3_pr_animation.asp