Question

我有一个动画div，我为2个属性right:100px和bottom:80px制作动画。

jsfiddle

喜欢这个;

.demo{
    background: url(http://www.clipartbest.com/cliparts/dT7/eoj/dT7eojnT9.jpeg) no-repeat;
    height: 100px;
    width:90px;
    animation: smileDog 3s ease-in-out infinite;
    position: absolute;
    background-size:100%
}
@keyframes smileDog{
    from{right:0px;bottom: 0px;}
    to{right:100px;bottom: 80px;}
}

现在我的问题是，我可以在一个关键帧中管理动画时序吗？我的意思是right:100px应该以3s移动，bottom:80px移动10s。这两个动作应该同时开始和发生，但持续时间不同。 有可能吗？

如果不然，我该怎么做？

Answer 1

您需要2个关键帧：

.demo{
    background: url(http://www.clipartbest.com/cliparts/dT7/eoj/dT7eojnT9.jpeg) no-repeat;
    height: 100px;
    width:90px;
    animation: smileDogRight 3s ease-in-out infinite,
               smileDogBottom 10s ease-in-out infinite;
    position: absolute;
    background-size:100%
}
@keyframes smileDogRight{
    from{right:0px;}
    to{right:100px;}
}
@keyframes smileDogBottom{
    from{bottom: 0px;}
    to{bottom: 80px;}
}

Answer 2

是的，通过执行以下操作，只需一个animation即可完成此操作：

将animation-duration更改为10s（这是两个动画效果的最大值）。
使用百分比代替from和to关键帧规则。例如，如果right: 0px到right: 100px需要在3秒内发生，则表示动画持续时间为30%。因此，在30%指定right: 100px，但不为bottom指定任何内容。
在100%（这只是10s），bottom:0px到bottom: 80px的完整动画效果也必须完成。因此，对于该关键帧规则，请指定right: 100px和bottom: 80px。
执行上述操作会bottom到3s之间有任意移动，但如果您希望它在3s内完全移动30％的完整移动，则添加bottom: 24px 30%关键帧规则中的（80px的30％）。

.demo{
    background: url(http://www.clipartbest.com/cliparts/dT7/eoj/dT7eojnT9.jpeg) no-repeat;
    height: 100px;
    width:90px;
    animation: smileDog 10s ease-in-out infinite;
    position: absolute;
    background-size:100%
}
@keyframes smileDog{
    0%{right:0px;bottom: 0px;}
    30%{right:100px;}
    100%{right:100px;bottom: 80px;}
}

Demo - 演示使用-webkit-前缀。

Demo 2 - 对于第4点中提到的替代方法。

如何使用不同的持续时间制作两个属性动画

2 个答案: