我可以用css3动画显示相反的状态吗?

Question

我想让一个<a>标签动画化，当它处于:active状态时，它会向右移动，当它回到常规状态时，它会向左移动。

目前它是动画点击，但当我离开鼠标按钮，它跳回来没有动画，我怎么能逆转动画?

这里是一个简单的例子，请注意，我必须使用position:relative;left:20px，因为在真正的应用程序中，这段代码是在一个绝对定位的元素，出于某种原因，使用边际导致意外的行为。

Answer 1

在a中使用left: 0;，在a中使用position: relative;，而不是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上使用它

Answer 2

如果您的活动代码与示例类似，则只需添加position:relative;left: 0px;在a{}规则上。

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