带关键帧的 CSS3 动画

Question

我用关键帧制作了一个 css3 动画。但我有一个问题。这是我的代码:

a[title*="in je favorieten"]:hover {
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;
    -moz-animation-name: slidein;
    -webkit-animation-name: slidein;
    -moz-animation-iteration-count: 3;
    -webkit-animation-iteration-count: 3;
    -moz-animation-direction: alternate;
    -webkit-animation-direction: alternate;
}

@-moz-keyframes slidein {
    from {
        width: 25px;
    }

    to {
        width: 80px;
    }
}

@-webkit-keyframes slidein  {
    from {
        width: 25px;
    }

    to {
        width: 80px;
    }
}

问题是。当我悬停 a 元素时。 a 元素必须设置为宽度 80。当我悬停时。比 a 元素必须返回 25 宽度。但现在，我悬停，他做动画。然后他又回到了 25 岁。我该如何解决这个问题？

谢谢!

Answer 1

你想要的不是通过动画实现的好主意，

尝试使用 CSS3 transitions [支持是一样的]

这里是示例代码

a{ 

 display:inline-block;
 width:25px;
 -moz-transition: width 1s; // Mozzilla
 -webkit-transition: width 1s; // Webkit
 transition: width 1s; // W3C
}

a:hover{
 // with a simple trickary this can be used to generate the same results what you want.
  width:100px;
}

如果你还想看动画的话

只需添加一条规则说

 a[title*="in je favorieten"]{
-moz-animation-duration: 1s;
-webkit-animation-duration: 1s;
-moz-animation-name: slideout;
-webkit-animation-name: slideout;
-moz-animation-iteration-count: 3;
-webkit-animation-iteration-count: 3;
-moz-animation-direction: alternate;
-webkit-animation-direction: alternate;
 }


 @-moz-keyframes slideout {
    from {
        width: 80px;
     }

     to {
        width: 25px;
     }
   }

@-webkit-keyframes slideout  {
    from {
        width: 80px;
     }

    to  {
       width: 25px;
   }
}