給定步驟的CSS3或jQuery動畫

我有一個使淡出效果的CSS。給定步驟的CSS3或jQuery動畫

#mainframe.normal 
{ 
    opacity: 1.0; 
} 
#mainframe.faded 
{ 
    opacity: 0.0; 
} 
#mainframe 
{ 
    /* Firefox */ 
    -moz-transition-property: opacity; 
    -moz-transition-duration: 3s; 
    /* WebKit */ 
    -webkit-transition-property: opacity; 
    -webkit-transition-duration: 3s; 
    /* Standard */ 
    transition-property: opacity; 
    transition-duration: 3s; 
}

它是由下面的腳本控制：

document.getElementById('mainframe').className = "faded";

不幸的是，在CSS沒有參數，即設定了整個動畫和貝塞爾函數應該用什麼步驟，只有總時間（慢快...）。我在jQuery中尋找它，但jQuery似乎也沒有這樣的參數。

有沒有辦法設置單幀超時（或者說，應該使用多少幀）？

我需要它來嘗試改善iPhone上的平滑度（我認爲更小的步驟==更高的性能）。

問候，

來源

2011-10-18 noober

希望有人有一個很好的答案，最後的辦法，你可以用動畫功能做到這一點？ –

看起來你正在尋找通過CSS3關鍵幀動畫所提供的功能。

https://developer.mozilla.org/en/CSS/@keyframes

支持在WebKit瀏覽器（Safari瀏覽器，鉻）和FF5 +。

來源

2012-01-23 21:35:33 1nfiniti

您可能想查看一下：Animate.css。

來源

2012-04-28 20:17:33 Alerty

與問題無關，但無論如何都是一個不錯的工具。謝謝。 – noober

這主要是爲了舉例說明。看看淡入淡出的效果：https：//github.com/daneden/animate.css/blob/master/animate.css#L807 – Alerty

哦，它也包含@ -webkit-keyframes ......以及那麼，那麼，那麼，事實上它是相關的。 – noober

給定步驟的CSS3或jQuery動畫

回答

相關問題