html - 如何使两个属性具有不同持续时间的动画

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 应该在 3 秒内移动，bottom:80px 应该在 10 秒内移动。这两个 Action 应该同时开始和发生，但持续时间不同。 这可能吗？

如果不行那我该怎么做呢？

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