ctms-yii/front-hiluker/web/static/css/animation.css

@charset "utf-8";
/* 高端定制服务动画效果 */

/*从上往下*/
@-webkit-keyframes a1{
	0%{opacity: 0;transform:translate(0px,-1000px)}
	60%{opacity: 1;transform:translate(0px,0px)}
}

@-moz-keyframes a1{
	0%{opacity: 0;transform:translate(0px,-1000px)}
	60%{opacity: 1;transform:translate(0px,0px)}
}

@-o-keyframes a1{
	0%{opacity: 0;transform:translate(0px,-1000px)}
	60%{opacity: 1;transform:translate(0px,0px)}
}

@keyframes a1{
	0%{opacity: 0;transform:translate(0px,-1000px)}
	60%{opacity: 1;transform:translate(0px,0px)}
}

/*从右往左*/
@-webkit-keyframes a2{
	0%{opacity: 0;transform:translate(1000px,0px)}
	60%{opacity: 1;transform:translate(0,0)}
}
@-moz-keyframes a2{
	0%{opacity: 0;transform:translate(1000px,0px)}
	60%{opacity: 1;transform:translate(0,0)}
}
@-o-keyframes a2{
	0%{opacity: 0;transform:translate(1000px,0px)}
	60%{opacity: 1;transform:translate(0,0)}
}
@keyframes a2{
	0%{opacity: 0;transform:translate(1000px,0px)}
	60%{opacity: 1;transform:translate(0,0)}
}

/*从左往右*/
@-webkit-keyframes a3{
	0%{opacity: 0;transform:translate(-1000px,0px)}
	60%{opacity: 1;transform:translate(0,0)}
}
@-moz-keyframes a3{
	0%{opacity: 0;transform:translate(-1000px,0px)}
	60%{opacity: 1;transform:translate(0,0)}
}
@-o-keyframes a3{
	0%{opacity: 0;transform:translate(-1000px,0px)}
	60%{opacity: 1;transform:translate(0,0)}
}
@keyframes a3{
	0%{opacity: 0;transform:translate(-1000px,0px)}
	60%{opacity: 1;transform:translate(0,0)}
}

/*从下往上*/
@-webkit-keyframes a4{
	0%{opacity: 0;transform:translate(0px,1000px)}
	60%{opacity: 1;transform:translate(0,0)}
}
@-moz-keyframes a4{
	0%{opacity: 0;transform:translate(0px,1000px)}
	60%{opacity: 1;transform:translate(0,0)}
}
@-o-keyframes a4{
	0%{opacity: 0;transform:translate(0px,1000px)}
	60%{opacity: 1;transform:translate(0,0)}
}
@keyframes a4{
	0%{opacity: 0;transform:translate(0px,1000px)}
	60%{opacity: 1;transform:translate(0,0)}
}

/*从左往右*/
@-webkit-keyframes a5{
	0%{opacity: 0;transform:translate(-1000px,0px)}
	60%{opacity: 1;transform:translate(0,0)}
}
@-moz-keyframes a5{
	0%{opacity: 0;transform:translate(-1000px,0px)}
	60%{opacity: 1;transform:translate(0,0)}
}
@-o-keyframes a5{
	0%{opacity: 0;transform:translate(-1000px,0px)}
	60%{opacity: 1;transform:translate(0,0)}
}
@keyframes a5{
	0%{opacity: 0;transform:translate(-1000px,0px)}
	60%{opacity: 1;transform:translate(0,0)}
}

/*放大*/
@-webkit-keyframes a6{
	0%{opacity: 0;-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-o-transform:scale(0.5);transform:scale(0.5);}
	60%{opacity: 1;-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2);}
	100%{opacity: 1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);}
}
@-moz-keyframes a6{
	0%{opacity: 0;-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-o-transform:scale(0.5);transform:scale(0.5);}
	60%{opacity: 1;-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2);}
	100%{opacity: 1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);}
}
@-o-keyframes a6{
	0%{opacity: 0;-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-o-transform:scale(0.5);transform:scale(0.5);}
	60%{opacity: 1;-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2);}
	100%{opacity: 1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);}
}
@keyframes a6{
	0%{opacity: 0;-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-o-transform:scale(0.5);transform:scale(0.5);}
	60%{opacity: 1;-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2);}
	100%{opacity: 1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);}
}

/*左右*/
@-webkit-keyframes a7{
	0%{opacity: 0;transform:translate(-1000px,0px)}
	25%{opacity: 1;transform:translate(0px,0px)}
	50%{opacity: 1;transform:translate(-50px,0px)}
	100%{opacity: 1;transform:translate(0px,0px)}
}
@-moz-keyframes a7{
	0%{opacity: 0;transform:translate(-1000px,0px)}
	25%{opacity: 1;transform:translate(0px,0px)}
	50%{opacity: 1;transform:translate(-50px,0px)}
	100%{opacity: 1;transform:translate(0px,0px)}
}
@-o-keyframes a7{
	0%{opacity: 0;transform:translate(-1000px,0px)}
	25%{opacity: 1;transform:translate(0px,0px)}
	50%{opacity: 1;transform:translate(-50px,0px)}
	100%{opacity: 1;transform:translate(0px,0px)}
}
@keyframes a7{
	0%{opacity: 0;transform:translate(-1000px,0px)}
	25%{opacity: 1;transform:translate(0px,0px)}
	50%{opacity: 1;transform:translate(-50px,0px)}
	100%{opacity: 1;transform:translate(0px,0px)}
}

/*360度旋转*/
@-webkit-keyframes a8{
from{-webkit-transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg)}
}

@-moz-keyframes a8{
from{-webkit-transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg)}
}

@-ms-keyframes a8{
from{-webkit-transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg)}
}

@keyframes a8{
from{-webkit-transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg)}
}

/**/
@-webkit-keyframes a9{
	0%{-webkit-transform-origin: left bottom;-webkit-transform: rotate(90deg);opacity: 0;}
	100%{-webkit-transform-origin: left bottom;-webkit-transform: rotate(0);opacity: 1;}
}
@-moz-keyframes a9{
	0%{-webkit-transform-origin: left bottom;-webkit-transform: rotate(90deg);opacity: 0;}
	100%{-webkit-transform-origin: left bottom;-webkit-transform: rotate(0);opacity: 1;}
}
@-o-keyframes a9{
	0%{-webkit-transform-origin: left bottom;-webkit-transform: rotate(90deg);opacity: 0;}
	100%{-webkit-transform-origin: left bottom;-webkit-transform: rotate(0);opacity: 1;}
}
@keyframes a9{
	0%{-webkit-transform-origin: left bottom;-webkit-transform: rotate(90deg);opacity: 0;}
	100%{-webkit-transform-origin: left bottom;-webkit-transform: rotate(0);opacity: 1;}
}

/*显示*/
@-webkit-keyframes a10{
	0%{opacity: 0;}
	100%{opacity: 1;}
}