css3動畫與彈跳結束

我試圖讓css3動畫工作，但它不像預期的那樣工作。我基本上是經過了一個非常快速的結束之後的彈跳，就像彈性一樣。我無法讓動畫快速關閉，反彈看起來非常慢。css3動畫與彈跳結束

我創建了一個小提琴。任何幫助表示讚賞。

@-webkit-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
    -webkit-transform: translateY(0); 
    } 
40% { 
    -webkit-transform: translateY(-30px); 
    } 
60% { 
    -webkit-transform: translateY(-15px); 
    } 
}

http://jsfiddle.net/bullrout/DZ8Qv/

來源

2013-10-08 user686483

你爲什麼不使用http://gsgd.co.uk/sandbox/jquery/easing/演示？他們有兩個函數'easeInBack'和'easeOutBack'，它們可以讓你尋找反彈。 – ediblecode

*反彈看起來很慢*？你有沒有嘗試減少動畫的持續時間？ – Harry

你會想看立方貝塞爾緩動，它可以做你想要的彈跳效果。利·貝羅建立了一個偉大的工具，在http://cubic-bezier.com/

例如創建它們，這裏是一個有反彈，但你可以用它玩得到你想要的效果：http://cubic-bezier.com/#.91,.8,.54,1.39

來源

2013-10-08 12:35:26 stephenhay

-1

對於這一點，他們有幾個插件，以幫助這個寬鬆使用jQuery就是其中之一，他們有easeoutbounce與此類似的，你可以改變的速度和或動畫效果很容易實現太。

來源

2013-10-08 12:21:39

的問題是，你還沒有啓用轉變，因爲你在#drawer CSS規則使用錯誤的名字

而不是

-webkit-transform: all 0.1s;

必須使用

-webkit-transition: all 0.1s;

在http://jsfiddle.net/DZ8Qv/2/

來源

2013-10-08 13:04:03

css3動畫與彈跳結束

回答

相關問題