Question

我想设置<a>代码的动画，以便在:active状态时它会向右移动，当回到常规状态时，它会动画回到左边。

目前它正在点击动画，但是当我离开鼠标按钮时它会跳回而没有动画，我该如何反转动画呢？

Here is a simple example，请注意我必须使用position:relative;left:20px，因为在真正的应用中，此代码位于绝对定位的元素内，并且出于某种原因，使用保证金导致意外行为。

Answer 1

只需使用left: 0; a并使用position: relative;中的a而不是a:active

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;
}

只是一个建议，点击移动链接会使访问者烦恼，为什么不在hover上使用

Demo

Answer 2

如果您的实时代码就像示例，您只需要放置position：relative;并离开：0px;也是一个{}规则。

正在发生的事情是当你停止悬停/释放点击时，它会失去位置：相对，因为它不在当前类上。如果没有位置规则，则会忽略左侧规则。

我可以使用css3为反向状态设置动画

2 个答案: