是否可以爲變換選項設置不同的持續時間/延遲？

我想爲我的html對象設置幾個轉換選項，但是使用不同的持續時間和延遲。是否可以爲變換選項設置不同的持續時間/延遲？

如果我嘗試使用類似的東西：

-webkit-transition: -webkit-transform, opacity; 
-webkit-transform: rotate(180deg) scale(2); 
-webkit-transition-duration: 2000ms, 6000ms; 
-webkit-transition-delay: 0ms, 6000ms;

那麼我將有變換和不透明度不同時間的功能，但我可以爲旋轉和縮放，例如不同的選擇旋轉10秒，並縮放20秒？

來源

2010-09-02 Ilya Tsuryev

可能不是直接的，但nesting elements可以達到同樣的效果。

來源

2010-09-02 18:17:50 Doug

是的，這應該是可能的，雖然肯定比我想象的更難。謝謝！ – 2010-09-03 16:58:32

是的，你可以直接用CSS3動畫做到這一點。如果你有一個持續20秒的從0到1的不透明變換，以及持續10秒的90度旋轉，那麼你創建一個10秒的關鍵幀，不透明度爲0.5，旋轉90度，另一個關鍵幀爲20秒，不透明度爲1和旋轉90度。這是一種痛苦，但它會起作用。嵌套的div是有點清潔劑（如上面的道格說）

確定這裏是代碼：

@-webkit-keyframes foo { 
0% { 
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); 
    opacity: 0; 
} 
50% { 
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); 
    opacity: 0.5; 
} 

100% { 
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(90deg); 
    opacity: 1; 
}

你會把

-webkit-animation-duration: 20s;

到HTML中。

來源

2010-09-09 18:29:04

我很抱歉，我沒有完全明白。不透明度（或任何其他「正常」屬性）和webtransform時間可以像這樣設置：-webkit-transition：-webkit-transform，不透明度; -webkit-transition-duration：2000ms，6000ms;但在你的例子中，如何爲我的例子添加另一個webtransform-scale的時間（如果webtransform被定義爲：-webkit-transform：rotate（180deg）scale（2）;）。謝謝！ – 2010-09-10 08:37:26

編輯代碼 - 我建議使用動畫而不是轉換 – 2010-09-10 23:24:36

不幸的是，如果您指定了定時功能並且您希望動畫在關鍵幀中保持平滑，則這種情況會崩潰。現在是2015年，還有更好的答案嗎？ – ericsoco 2015-12-10 17:50:40

如果Doug在你的動畫中使用了3D透視圖，那就會出現問題。可能你可以使用「transform-style：preserve-3d」，但它在IE 10-11中不起作用，並且在所有其他瀏覽器中運行Firefox時都很奇怪。所以我認爲唯一的解決方案是使用CSS3動畫。在你的情況下，它將是：

@-webkit-keyframes rotate_scale { 

    0% { 
     -webkit-transform: rotate(0deg) scale(0); 
    } 
    50% { 
     -webkit-transform: rotate(90deg) scale(0); 
    } 
    100% { 
     -webkit-transform: rotate(180deg) scale(2); 
    } 
} 
@keyframes rotate_scale { 

    0% { 
     transform: rotate(0deg) scale(0); 
    } 
    50% { 
     transform: rotate(90deg) scale(0); 
    } 
    100% { 
     transform: rotate(180deg) scale(2); 
    } 
}

因此，您可以設置變換的最長持續時間。例如旋轉20秒：animation-duration: 20s; animation-name: rotate_scale; -webkit-animation-duration: 20s; -webkit-animation-name: rotate_scale;然後計算何時開始另一個變換。旋轉後十秒鐘內開始檢查。所以這將是全職的一半（50％）。它會持續10秒，直到全職結束（100％）。但是，如果您希望縮放5秒的時間，例如您需要添加新的關鍵幀75% { transform: rotate(135deg) scale(2); }並在那裏寫入兩個變換。

來源

2014-04-30 08:15:48 user2846477

是否可以爲變換選項設置不同的持續時間/延遲？

回答

相關問題