2

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.

4

2 に答える 2

1

ライブコードが例のようである場合は、position：relative;を配置するだけです。左：0px; {}ルールについても。

何が起こっているのかというと、ホバー/クリックを離すと、現在のクラスにないため、相対的な位置が失われます。位置ルールがない場合、左側のルールは無視されます。

于 2012-12-20T15:39:08.057 に答える
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

于 2012-12-20T15:36:42.060 に答える