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

Question

我想为 <a> 制作动画标记所以当在 :active状态它将向右移动，当返回到常规状态时它将动画回到左侧。

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

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

Answer 1

只需对 a 使用 left: 0; 并在 a 中使用 position: relative; 而不是 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;
}

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

Demo