html5动画脚本,逼真的HTML5树叶飘落动画

#container{

position:relative;

height:700px;

width:500px;

margin:10pxauto;

overflow:hidden;

border:4pxsolid#5C090A;

background:#4E4226url('images/backgroundLeaves.jpg')no-repeattopleft;

}

/*DefinesthepositionanddimensionsoftheleafContainerdiv*/

#leafContainer

{

position:absolute;

width:100%;

height:100%;

}

/*Definestheappearance,position,anddimensionsofthemessagediv*/

#message

{

position:absolute;

top:160px;

width:100%;

height:300px;

background:transparenturl('images/textBackground.png')repeat-xcenter;

color:#5C090A;

font-size:220%;

font-family:'Georgia';

text-align:center;

padding:20px10px;

-webkit-box-sizing:border-box;

-webkit-background-size:100%100%;

z-index:1;

}

p{

margin:15px;

}

a

{

color:#5C090A;

text-decoration:none;

}

/*Setsthecolorofthe"Dino'sGardeningService"message*/

em

{

font-weight:bold;

font-style:normal;

}

.phone{

font-size:150%;

vertical-align:middle;

}

/*ThisCSSruleisappliedtoalldivelementsintheleafContainerdiv.

ItstylesandanimateseachleafDiv.

*/

#leafContainer>div

{

position:absolute;

width:100px;

height:100px;

/*Weusethefollowingpropertiestoapplythefadeanddropanimationstoeachleaf.

Eachofthesepropertiestakestwovalues.Thesevaluesrespectivelymatchasetting

forfadeanddrop.

*/

-webkit-animation-iteration-count:infinite,infinite;

-webkit-animation-direction:normal,normal;

-webkit-animation-timing-function:linear,ease-in;

}

/*ThisCSSruleisappliedtoallimgelementsdirectlyinsidedivelementswhichare

directlyinsidetheleafContainerdiv.Inotherwords,itmatchesthe'img'elements

insidetheleafDivswhicharecreatedinthecreateALeaf()function.

*/

#leafContainer>div>img{

position:absolute;

width:100px;

height:100px;

/*WeusethefollowingpropertiestoadjusttheclockwiseSpinorcounterclockwiseSpinAndFlip

animationsoneachleaf.

ThecreateALeaffunctionintheLeaves.jsfiledetermineswhetheraleafhasthe

clockwiseSpinorcounterclockwiseSpinAndFlipanimation.

*/

-webkit-animation-iteration-count:infinite;

-webkit-animation-direction:alternate;

-webkit-animation-timing-function:ease-in-out;

-webkit-transform-origin:50%-100%;

}

/*Hidesaleaftowardstheveryendoftheanimation*/

@-webkit-keyframesfade

{

/*Showaleafwhileintoorbelow95percentoftheanimationandhideit,otherwise*/

0%{opacity:1;}

95%{opacity:1;}

100%{opacity:0;}

}

/*Makesaleaffallfrom-300to600pixelsinthey-axis*/

@-webkit-keyframesdrop

{

/*Movealeafto-300pixelsinthey-axisatthestartoftheanimation*/

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

/*Movealeafto600pixelsinthey-axisattheendoftheanimation*/

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

}

/*Rotatesaleaffrom-50to50degreesin2Dspace*/

@-webkit-keyframesclockwiseSpin

{

/*Rotatealeafby-50degreesin2Dspaceatthestartoftheanimation*/

0%{-webkit-transform:rotate(-50deg);}

/*Rotatealeafby50degreesin2Dspaceattheendoftheanimation*/

100%{-webkit-transform:rotate(50deg);}

}

/*Flipsaleafandrotatesitfrom50to-50degreesin2Dspace*/

@-webkit-keyframescounterclockwiseSpinAndFlip

{

/*Flipaleafandrotateitby50degreesin2Dspaceatthestartoftheanimation*/

0%{-webkit-transform:scale(-1,1)rotate(50deg);}

/*Flipaleafandrotateitby-50degreesin2Dspaceattheendoftheanimation*/

100%{-webkit-transform:scale(-1,1)rotate(-50deg);}

}