html - 我可以用css3动画反转状态吗

Question

我想为<a>标签设置动画，因此当处于:active状态时它会向右移动，而当回到常规状态时它会向左移动。

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

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

Answer 1

只使用left: 0;fora和使用position: relative;ina而不是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; 左：0px；也适用于 {} 规则。

发生的事情是当您停止悬停/释放单击时，它会丢失位置：相对，因为它不在当前类中。没有位置规则，左规则将被忽略。