<div id="ballDiv">

 　　<div id="ball"></div>

 </div>

/*ball样式*/

#ballDiv{ height:400px; background-color:#333333;}

#ball{ width:100px; height:100px; border-radius:50%; background:-webkit-radial-gradient(center center,circle,#fff,blue); box-shadow:3px 7px 8px #ccc; -webkit-animation:ball 5s cubic-bezier(0.0,0.25,0.50,1.0); -webkit-transform:translate(250px, 300px);}

@-webkit-keyframes ball

{

　　0%{-webkit-transform:translate(0, 0);}

　　10%{-webkit-transform:translate(0, 330px); height:70px;}

　　20%{-webkit-transform:translate(50px, 50px); height:100px;}

　　30%{-webkit-transform:translate(50px, 330px); height:70px;}

　　40%{-webkit-transform:translate(100px, 100px); height:100px;}

　　50%{-webkit-transform:translate(100px, 320px); height:80px;}

　　60%{-webkit-transform:translate(150px, 150px); height:100px;}

　　70%{-webkit-transform:translate(150px, 320px); height:80px;}

　　80%{-webkit-transform:translate(200px, 200px); height:100px;}

　　90%{-webkit-transform:translate(200px, 300px); height:100px;}

　　100%{-webkit-transform:translate(250px, 300px); height:100px;}

}