是否可以爲CSS轉換指定自定義定時函數？

我現在很頻繁地使用CSS轉換，但發現它僅限於只能訪問緩入，緩出等貝塞爾曲線選項似乎允許最多控制，但即使這樣也不允許指定實際緩動方程將模擬彈性緩動等。有沒有另外的選擇，或需要訴諸JavaScript來執行這種類型的動畫？是否可以爲CSS轉換指定自定義定時函數？

來源

2011-06-01 Jim Jeffers

我發現沒有辦法用純CSS做彈性轉換。但是，您可以作弊並執行CSS動畫。這是蘋果使用他們的網站：

@-webkit-keyframes open-1 { 
    from { opacity:0; -webkit-transform:translate3d(210px, -145px, 0); } 
    25% { opacity:1; -webkit-transform:translate3d(-15.6px, 4.1px, 0); } 
    30% { opacity:1; -webkit-transform:translate3d(-10.3px, 2.7px, 0); } 
    35% { opacity:1; -webkit-transform:translate3d(0, 0, 0); } 
    40% { opacity:1; -webkit-transform:translate3d(4.5px, -1.2px, 0); } 
    45% { opacity:1; -webkit-transform:translate3d(2.9px, -0.8px, 0); } 
    50% { opacity:1; -webkit-transform:translate3d(0, 0, 0); } 
    55% { opacity:1; -webkit-transform:translate3d(-1.3px, 0.3px, 0); } 
    60% { opacity:1; -webkit-transform:translate3d(-0.8px, 0.2px, 0); } 
    65% { opacity:1; -webkit-transform:translate3d(0, 0, 0); } 
    70% { opacity:1; -webkit-transform:translate3d(0.4px, -0.1px, 0); } 
    75% { opacity:1; -webkit-transform:translate3d(0.2px, -0.1px, 0); } 
    80% { opacity:1; -webkit-transform:translate3d(0, 0, 0); } 
    85% { opacity:1; -webkit-transform:translate3d(-0.1px, 0, 0); } 
    90% { opacity:1; -webkit-transform:translate3d(-0.1px, 0, 0); } 
    to { opacity:1; -webkit-transform:translate3d(0, 0, 0); } 
}

這些動畫用於很大程度上對蘋果自己的網站： http://www.apple.com/mac/

顯然，這是強大的，在一定程度上 - 因爲動畫是百分比，你可以輕鬆改變持續時間並保持效果。

但是，這仍然是非常靜態的。假設您想單擊一個按鈕並讓它執行彈性縮放動畫。沒問題，一個動畫可以反覆使用每個按鈕。但是，讓我們假設你想要一個元素彈性地捕捉它的位置，無論用戶最近在屏幕上點擊或點擊了哪個位置。那麼在這種情況下，您需要動態重新計算關鍵幀，然後將動畫應用到元素。

在寫這篇文章的時候，我不知道有什麼好的例子可以在javascript裏面動態生成CSS動畫。實際上它可能需要另一個問題。總而言之，這是我發現的唯一一種純粹的CSS方式，它提供了一個複雜的緩動方程，比如純粹用CSS進行彈性緩動。

來源

2011-06-23 18:53:29

我已經創建了一個javascript框架，以便從現在開始輕鬆完成此操作：https：//github.com/jimjeffers/Sauce – 2011-07-15 18:59:23

您可以使用Caesar爲不同的方程式生成CSS。

來源

2011-06-01 10:34:02 alex

感謝 - 這看起來像迄今最好的，但即使在這裏 - 它不是可能做一些更復雜的事情，比如沒有javascript的彈性緩解。 – 2011-06-22 13:57:39

相反，它是:)我真的很喜歡凱撒工具，但如果你想要彈性或彈性轉換，請查看：http://www.css3animationgenerator.com/ - 這對凱撒 – 2012-05-16 16:35:49

哇！感謝那個偉大的參考 – 2013-06-08 03:57:02

我知道，如果你使用的mootools，你可以寫你自己的公式：

http://mootools.net/docs/core/Fx/Fx.Transitions

類：Fx.Transition

這個類是隻對數學有用想要編寫自己的簡化公式的天才。使用'easeIn'， 'easeOut'和'easeInOut'方法返回一個Fx 轉換函數。

也許像jquery或prototype這樣的其他庫有相同的類，可能它們有類似的東西。

祝你好運！

來源

2011-06-01 10:39:23 pleasedontbelong

實際上，您並不需要JavaScript庫來支持複雜緩動功能，如反彈緩入功能或彈性緩解功能。這裏的CSS3動畫產生工具產生的關鍵幀適合你，能夠不被W3C規範支持12個額外的寬鬆政策功能：

http://www.css3animationgenerator.com/

來源

2012-05-16 16:24:02

感謝Eric，但這基本上與我的答案相同。這使用JavaScript通過Web窗體生成CSS關鍵幀動畫。我的解決方案是相同的方法，除了我使用JavaScript聲明式生成實時文檔上的CSS關鍵幀。兩者都有優點/缺點。我期望的是一個支持多個控制點的基於CSS的曲線。這將允許我們繞過這個javascript關鍵幀生成。 – 2012-05-18 21:39:39

是否可以爲CSS轉換指定自定義定時函數？

回答

相關問題