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

我有一个动画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秒内移动。这两个举措应该同时开始并发生，但持续时间不同。 这可能吗？

如果没有，那我该怎么做？

来源

2014-10-11 Mukul Kant

你可以只用一个动画做的，但要看是什么是确切的要求中提到的另一种方法。它应该移动到底部还是移动到底部，还是同时移动但是持续时间不同？ – Harry 2014-10-11 12:47:17

雅你说得对，我想同时 – 2014-10-11 12:54:09

您需要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;} 
}

来源

2014-10-11 12:39:21 antyrat

是的，这可以只是一个单一的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％的充满运动然后在30%关键帧添加规则bottom: 24px（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点

来源

2014-10-11 13:05:51 Harry

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

回答

相关问题