逼真的HTML5树叶飘落动画

   inside the leafDivs which are created in the createALeaf() function.  
*/  
#leafContainer > div > img {   
     position: absolute;   
     width: 100px;   
     height: 100px;   
  
    /* We use the following properties to adjust the clockwiseSpin or counterclockwiseSpinAndFlip  
       animations on each leaf.  
       The createALeaf function in the Leaves.js file determines whether a leaf has the   
       clockwiseSpin or counterclockwiseSpinAndFlip animation.  
    */  
     -webkit-animation-iteration-count: infinite;   
     -webkit-animation-direction: alternate;   
     -webkit-animation-timing-function: ease-in-out;   
     -webkit-transform-origin: 50% -100%;   
}   
  
/* Hides a leaf towards the very end of the animation */  
@-webkit-keyframes fade   
{   
    /* Show a leaf while into or below 95 percent of the animation and hide it, otherwise */  
    0%   { opacity: 1; }   
    95%  { opacity: 1; }   
    100% { opacity: 0; }   
}   
  
/* Makes a leaf fall from -300 to 600 pixels in the y-axis */  
@-webkit-keyframes drop   
{   
    /* Move a leaf to -300 pixels in the y-axis at the start of the animation */  
    0%   { -webkit-transform: translate(0px, -50px); }   
    /* Move a leaf to 600 pixels in the y-axis at the end of the animation */  
    100% { -webkit-transform: translate(0px, 650px); }