Question

I would like to animate an <a> tag so when in :active state it will move to the right and when going back to regular state it would animate back to the left.

Currently it is animating on click but when I leave the mouse button it jumps back with no animation, how can I reverse the animation?

Here is a simple example, please note that i have to use position:relative;left:20px since in the real app this code is inside an absolutely positioned element and for some reason, using margin causing unexpected behaviour.

Answer 1

Just use left: 0; for a and use position: relative; in a rather than a:active

Demo

CSS

a {
   display: block;
   background: red;    
   -webkit-transition: left .2s ease-in,margin .2s ease-in;
   -moz-transition: left .2s ease-in,margin .2s ease-in;
   transition: left  .2s ease-in,margin .2s ease-in;
   left: 0;
   position: relative;
}

Just a suggestion, moving links on click will annoy the visitors, why not use it on hover

Demo