3

我用关键帧制作了一个 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 岁。我该如何解决这个问题？

谢谢！

4

2 回答 2

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;
   }
}
于 2011-12-12T14:56:15.353 回答
1

除了这种方法也不正确......你应该坚持像 Abhishek 一开始写的那样过渡。

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

删除以下 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

于 2011-12-12T19:49:50.520 回答