Using CSS3 Animation simulation to achieve small ball free fall effect

Use pure CSS Code simulation to achieve the small ball freefall effect:

The HTML code is as follows:

1 <  ID= "Balldiv">2<id= "Ball "></div>3</div>  　　

CSS style code:

/*Ball Style*/#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;}}

Using CSS3 Animation simulation to achieve small ball free fall effect