首页 文章

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

提问于
浏览
2

我想设置一个 <a> 标签的动画,这样当它处于 :active 状态时它将向右移动,当回到常规状态时,它将动画回到左边 .

目前它是点击动画,但当我离开鼠标按钮它没有动画跳回来,我该如何反转动画?

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

2 回答

  • 1

    只需使用 left: 0; for a 并在 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

  • 1

    如果您的实时代码就像示例,您只需要将position:relative;并离开:0px;也是一个{}规则 .

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

相关问题