如何使兩個屬性動畫不同的持續時間

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秒內移動。這兩個舉措應該同時開始併發生，但持續時間不同。 這可能嗎？

如果沒有，那我該怎麼做？

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通過以下操作完成：

1. 更改animation-duration到10s（這是最大的兩個動畫效果）。
2. 而不是from和to關鍵幀規則使用百分比。例如，如果right: 0px到right: 100px需要在3秒內發生，那麼它意味着動畫持續時間的30%。因此，在30%指定right: 100px但不指定bottom的任何內容。
3. 在100%（這不過是10s）bottom:0px到bottom: 80px的完整動畫效果也必須完成。因此，對於該關鍵幀規則，請指定right: 100px和bottom: 80px。
4. 做上述將有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點