Bouncing Ball

CSS3 keyframes animation

by Chris Watson

HTML

<div id="ball"><div id="sheen"></div></div><div id="shadow"></div><div id="box"><div id="recess"></div><div id="base"></div></div>

CSS

body{
    background:#DEE3D8;
    margin-top:50px;
}
#box{
    left:50%;
    margin-left:-300px;
    position:absolute;
    top:50px;
    border:5px solid #E3E8DC;
}
#recess{
    height:250px;
    background:#DEE3D8;
    width:500px;
    border-bottom:75px solid #EAEDE4;
    border-top:10px solid #CBD1C2;
    border-left:50px solid #DAE0D1;
    border-right:50px solid #DAE0D1;
}
#sheen{
    background:-moz-radial-gradient(center,ellipse cover,rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);background:-webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0)));background:-webkit-radial-gradient(center,ellipse cover,rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);background:-o-radial-gradient(center,ellipse cover,rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);background:-ms-radial-gradient(center,ellipse cover,rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);background:radial-gradient(ellipse at center,rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#00ffffff',GradientType=1);
    position:relative;
    left:3px;
    width:30px;
    height:30px;
    border-radius:25px;
    opacity:0.15;
}
#ball{
    background:#a90329;background:-moz-linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#a90329),color-stop(44%,#8f0222),color-stop(100%,#6d0019));background:-webkit-linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);background:-o-linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);background:-ms-linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);background:linear-gradient(to bottom,#a90329 0,#8f0222 44%,#6d0019 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a90329',endColorstr='#6d0019',GradientType=0);
    box-shadow: inset 0 -5px 15px #33000C, 
                inset -2px -1px 40px #AB0A2F, 
        ...