How to use css3 to achieve a ball bounce effect?

Question

In fact I have almost successs: I have a div needed to bounce :

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

then I use css3 animate to achieve bounce effect:

.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;
   }
}​

now the online example is here :http://jsfiddle.net/GEEtx/

It seems work, but not good enough,how should I set the key-frames parameter to make it bounce more like a ball?Is there a formula to calculate the bounce height and countaccording to the element's width and height, or the time?

Answer 1

With little trial and error we can figure out the bounce effect as needed.

There is this formula that is used in all jQuery easing plugins to get the bounce effect.

        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

So applying this to current CSS keyframes.
d : the animation duration. //1.5 : 1500
b : top value at the start // 0
c : change in value //40px
t : Current time // 10

With some more work on it by applying these we might find out the values needed for the bounce effect in CSS.

I also found this CSS3 3D Bouncing Ball tutorial

Hope that might help you.