1

我有一个简单的动画任务。我已经应用了关键帧来定义动画，并为此关键帧提供了对我需要使用选择器应用它们的元素的参考。

动画正在工作，但它没有采用我提供的计时功能。相反，它采用默认的“轻松”。

div {
    padding: 2px 2px 2px 2px;
    margin: 2px 2px 2px 2px;
    width:100px;
    color:white;
    font-weight:bold;
    /*-webkit-transition-timing-function: cubic-bezier(0.5, 1, 0.25, 1);*/
    -webkit-transition-timing-function: linear;
}
.div1, .div2 {
    -webkit-animation:AA_Anim 1.5s;
    position:relative;
}

@-webkit-keyframes AA_Anim {
    from {
        left:300px;
    }
    to {
        left:0px;
    }
}

示例 - JSFddle

4

1 回答 1

3

首先，这-webkit-animation-timing-function:不是-webkit-transition-timing-function因为您正在使用动画

其次，由于-webkit-animation:AA_Anim 1.5s;. 使用简写版本 (just animation) 使用给定的值并假定其余的默认值。因此，您必须将计时功能放在 each 中-webkit-animation，或者使用animation-nameandanimation-duration代替。第二种方法如下所示：

div {
    ...
    -webkit-animation-timing-function: cubic-bezier(0.5, 1, 0.25, 1);
}
.div1 > div, .div2 > div {
    position:relative;
    -webkit-animation-name:AA_Anim;
    -webkit-animation-duration:2.5s;
}
.div1, .div2 {
    -webkit-animation-name:AA_Anim;
    -webkit-animation-duration:1.5s;
    position:relative;
}

更新的演示

于 2013-11-09T16:26:19.343 回答