如何使用css3來實現球彈跳效果？

Question

事實上我幾乎successs： 我有一個div需要反彈：

<div class="container"> 
    <div class="flipcard transition allowhover"> 
     <h1>This is card</h1> 
    </div> 
</div>​ 

然後，我使用CSS3動畫來實現反彈效果：

.container{ 
    width: 100%; 
    height: 100%; 
    -moz-perspective: 1000px; 
} 
.flipcard{ 
    background: red; 
    width: 200px; 
    height: 300px; 
    position: absolute; 
    top: 40px; 
    left: 20px; 
    -webkit-transform-style: preserve-3d; 
    -webkit-transition:all 0.6s ease-in-out; 
} 
.allowhover:hover{ 
    -webkit-animation-name: bounce; 
    -webkit-animation-duration: 1.5s; 
    -webkit-animation-iteration-count: infinite ; 
    -webkit-animation-direction: normal; 
} 


@-webkit-keyframes bounce { 
    25% { 
    top:7px; 
    } 
    45% { 
    top:40px; 
    } 
    64% { 
     top:19px; 
    } 
    76% { 
     top:40px; 
    } 
    96%{ 
     top: 25px 
    } 
    100% { 
     top:40px; 
    } 
}​ 

現在網上例子是在這裏：http://jsfiddle.net/GEEtx/

看來工作，但不夠好，我應該如何設置key-frames參數，使其更像一個球彈跳？是否有一個公式來計算b盎司高度和數量根據元素的寬度和高度，或時間？

Answer 1

只需很少的試驗和錯誤，我們可以根據需要找出反彈效果。

這個公式用於所有jQuery緩動插件中以獲得反彈效果。

 easeInBounce: function (x, t, b, c, d) { 
       return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b; 
     }, 
     easeOutBounce: function (x, t, b, c, d) { 
       if ((t/=d) < (1/2.75)) { 
         return c*(7.5625*t*t) + b; 
       } else if (t < (2/2.75)) { 
         return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; 
       } else if (t < (2.5/2.75)) { 
         return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; 
       } else { 
         return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; 
       } 

// t: current time, b: begInnIng value, c: change In value, d: duration 

因此，將其應用於當前的CSS關鍵幀。 d：動畫持續時間。 //1.5：1500
B：在開始頂值// 0
C：在值// 40像素噸變化：當前時間// 10

隨着它的一些更多的工作通過施加這些我們可能會發現CSS中反彈效果所需的值。

我也發現了這個CSS3 3D Bouncing Ball tutorial

希望可以幫助你。