CSS3.0动画兼容模板

/*===========animation+keyframes=============================*/
.animation{
-webkit-animation:myRotate 1s linear 0s infinite;
-ms-animation:myRotate 1s linear 0s infinite;
-moz-animation:myRotate 1s linear 0s infinite;
-o-animation:myRotate 1s linear 0s infinite;
animation:myRotate 1s linear 0s infinite;


-webkit-animation-play-state:running;
-ms-animation-play-state:running;
-moz-animation-play-state:running;
-o-animation-play-state:running;
animation-play-state:running;
}
@-webkit-keyframes myRotate{
0%{
-webkit-transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(360deg);
}
}
@-ms-keyframes myRotate{
0%{
-ms-transform:rotate(0deg);
}
100%{
-ms-transform:rotate(360deg);
}
}
@keyframes myRotate{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}


/*===========transition============================*/
.transition{
-webkit-transition:all 1s linear;
-ms-transition:all 1s linear;
-moz-transition:all 1s linear;
-o-transition:all 1s linear;
transition:all 1s linear;
}






/*==========父本视图设置==perspective+origin=============*/
.perspective{
-webkit-perspective:1000;
-ms-perspectivep:1000
-moz-perspective:1000;
-o-perspective:1000;
perspective:1000;


-webkit-perspective-origin:50% 50%;
-ms-perspective-origin:50% 50%;
-moz-perspective-origin:50% 50%;
-o-perspective-origin:50% 50%;
perspective-origin:50% 50%;


}


/*================transform-style===================*/


.style{
-webkit-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
}


/*================backface-visibility===================*/


.backface-visibility{
-webkit-backface-visibility:visible;    or hidden
-ms-backface-visibility:visible;    or hidden
-moz-backface-visibility:visible;    or hidden
-o-backface-visibility:visible;    or hidden
backface-visibility:visible;    or hidden
}




/*===========origin================*/
/*===origin3D:50% 50% 200px(Z轴一半)=============*/
/*==不要关键字right，长度单位，百分比====*/
.origin{
-webkit-transform-origin:50px 50px;
-ms-transform-origin:50px 50px;
-moz-transform-origin:50px 50px;
-o-transform-origin:50px 50px;
transform-origin:50px 50px;
}



/*=========rotate=转动===========*/
/*====包括rotateX()和rotateY()======*/
.rotate{
-webkit-transform:totate(30deg);
-ms-transform:totate(30deg);
-moz-transform:totate(30deg);
-o-transform:totate(30deg);
transform:totate(30deg);
}
/*=========translate=平动===========*/
.translate{
-webkit-transform:translate(30px,50px);
-ms-transform:translate(30px,50px);
-moz-transform:translate(30px,50px);
-o-transform:translate(30px,50px);
transform:translate(30px,50px);
}
/*=========scale=缩放===========*/
.scale{
-webkit-transform:scale(0.5,0.5);
-ms-transform:scale(0.5,0.5);
-moz-transform:scale(0.5,0.5);
-o-transform:scale(0.5,0.5);
transform:scale(0.5,0.5);
}


/*=========skew=倾角===========*/
.skew{
-webkit-transform:skew(30deg,30deg);
-ms-transform:skew(30deg,30deg);
-moz-transform:skew(30deg,30deg);
-o-transform:skew(30deg,30deg);
transform:skew(30deg,30deg);
}


/*=========box-shadow=阴影===========*/
/*box-shadow:内阴影 右偏 下偏 模糊度 扩散度 阴影颜色*/
.box-shadow{
-webkit-box-shadow:inset 10px 10px 20px 10px red;
-ms-box-shadow:inset 10px 10px 20px 10px red;
-moz-box-shadow:inset 10px 10px 20px 10px red;
-o-box-shadow:inset 10px 10px 20px 10px red;
box-shadow:inset 10px 10px 20px 10px red;
}


/*=============linear-gradient=线性渐变===================*/
/*===========radial-gradient============*/
.linear-gradient{
background:-webkit-linear-gradient(left,green,blue) OR (left, red 30%,green 50%,blue 20%);
background:-ms-linear-gradient(left,green,blue) OR (left, red 30%,green 50%,blue 20%);
background:-moz-linear-gradient(left,green,blue) OR (left, red 30%,green 50%,blue 20%);
background:-o-linear-gradient(left,green,blue) OR (left, red 30%,green 50%,blue 20%);
background:linear-gradient(left,green,blue) OR (left, red 30%,green 50%,blue 20%);
}