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

我有一個動畫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

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

回答

相關問題