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元素必须设置为宽度80.当我徘徊时。比一个元素必须返回25宽度。但现在，我徘徊，他做动画。而且他回到了25.我怎么能解决这个问题？

谢谢！

Answer 1

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

尝试使用CSS3过渡[支持相同]

以下是示例代码

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;
   }
}

Answer 2

除了方法不正确之外...... 你应该像Abhishek最初写的那样坚持过渡。

对于带有关键帧的CSS3动画，您应该检查规格。你的代码基本上说的是“在'slidein'/'slideout'中指定的动画连续3次交替方向（从左到右/从右到左）”。

删除以下3行并包含Abhishek的代码以使其正常工作（更好）

-moz-animation-iteration-count: 3;
-webkit-animation-iteration-count: 3;
-moz-animation-direction: alternate;
-webkit-animation-direction: alternate;

虽然这可能仍然会导致图层在加载页面时显示为未显示闪烁（未测试）

参考： http://www.w3.org/TR/css3-animations/#animation-iteration-count

带关键帧的CSS3动画

2 个答案: