/*=======动画1=============*/
.animated
{-webkit-animation-duration:.7s;animation-duration:.7s;-webkit-animation-fill-mode:both;animation-fill-mode:both;}

/*向上淡出*/
.yuInUp{-webkit-animation-name:yuInUp;animation-name:yuInUp}

@-webkit-keyframes yuInUp{
	0%{opacity:0;-webkit-transform:translateY(100px);transform:translateY(100px)}
	100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes yuInUp{
	0%{opacity:0;-webkit-transform:translateY(100px);transform:translateY(100px)}
	100%{-webkit-transform:translateY(0);transform:translateY(0)}
}


/*=======动画2=============*/
.animateds {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}

.animateds.infinite {
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1
}

@-webkit-keyframes leftSpeedIn {
	0% {
		-webkit-transform: translateX(100%) skewX(-20deg);
		transform: translateX(100%) skewX(-20deg);
		opacity: 0
	}
	60% {
		-webkit-transform: translateX(-10%) skewX(20deg);
		transform: translateX(-10%) skewX(20deg);
		opacity: 1
	}
	80% {
		-webkit-transform: translateX(0%) skewX(-5deg);
		transform: translateX(0%) skewX(-5deg);
		opacity: 1
	}
	100% {
		-webkit-transform: translateX(0%) skewX(0deg);
		transform: translateX(0%) skewX(0deg);
		opacity: 1
	}
}

@keyframes leftSpeedIn {
	0% {
		-webkit-transform: translateX(100%) skewX(-20deg);
		-ms-transform: translateX(100%) skewX(-20deg);
		transform: translateX(100%) skewX(-20deg);
		opacity: 0
	}
	60% {
		-webkit-transform: translateX(-10%) skewX(20deg);
		-ms-transform: translateX(-10%) skewX(20deg);
		transform: translateX(-10%) skewX(20deg);
		opacity: 1
	}
	80% {
		-webkit-transform: translateX(0%) skewX(-5deg);
		-ms-transform: translateX(0%) skewX(-5deg);
		transform: translateX(0%) skewX(-5deg);
		opacity: 1
	}
	100% {
		-webkit-transform: translateX(0%) skewX(0deg);
		-ms-transform: translateX(0%) skewX(0deg);
		transform: translateX(0%) skewX(0deg);
		opacity: 1
	}
}

.leftSpeedIn {
	-webkit-animation-name: leftSpeedIn;
	animation-name: leftSpeedIn;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}

@-webkit-keyframes rightSpeedIn {
	0% {
		-webkit-transform: translateX(-100%) skewX(20deg);
		transform: translateX(-100%) skewX(-20deg);
		opacity: 0
	}
	60% {
		-webkit-transform: translateX(10%) skewX(-20deg);
		transform: translateX(10%) skewX(20deg);
		opacity: 1
	}
	80% {
		-webkit-transform: translateX(0%) skewX(5deg);
		transform: translateX(0%) skewX(-5deg);
		opacity: 1
	}
	100% {
		-webkit-transform: translateX(0%) skewX(0deg);
		transform: translateX(0%) skewX(0deg);
		opacity: 1
	}
}

@keyframes rightSpeedIn {
	0% {
		-webkit-transform: translateX(-100%) skewX(20deg);
		-ms-transform: translateX(-100%) skewX(20deg);
		transform: translateX(-100%) skewX(20deg);
		opacity: 0
	}
	60% {
		-webkit-transform: translateX(10%) skewX(-20deg);
		-ms-transform: translateX(10%) skewX(-20deg);
		transform: translateX(10%) skewX(-20deg);
		opacity: 1
	}
	80% {
		-webkit-transform: translateX(0%) skewX(5deg);
		-ms-transform: translateX(0%) skewX(5deg);
		transform: translateX(0%) skewX(5deg);
		opacity: 1
	}
	100% {
		-webkit-transform: translateX(0%) skewX(0deg);
		-ms-transform: translateX(0%) skewX(0deg);
		transform: translateX(0%) skewX(0deg);
		opacity: 1
	}
}

.rightSpeedIn {
	-webkit-animation-name: rightSpeedIn;
	animation-name: rightSpeedIn;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}

@-webkit-keyframes flipInX {
	0% {
		-webkit-transform: perspective(400px) rotateX(90deg);
		transform: perspective(400px) rotateX(90deg);
		opacity: 0
	}
	40% {
		-webkit-transform: perspective(400px) rotateX(-10deg);
		transform: perspective(400px) rotateX(-10deg)
	}
	70% {
		-webkit-transform: perspective(400px) rotateX(10deg);
		transform: perspective(400px) rotateX(10deg)
	}
	100% {
		-webkit-transform: perspective(400px) rotateX(0deg);
		transform: perspective(400px) rotateX(0deg);
		opacity: 1
	}
}

@keyframes flipInX {
	0% {
		-webkit-transform: perspective(400px) rotateX(90deg);
		-ms-transform: perspective(400px) rotateX(90deg);
		transform: perspective(400px) rotateX(90deg);
		opacity: 0
	}
	40% {
		-webkit-transform: perspective(400px) rotateX(-10deg);
		-ms-transform: perspective(400px) rotateX(-10deg);
		transform: perspective(400px) rotateX(-10deg)
	}
	70% {
		-webkit-transform: perspective(400px) rotateX(10deg);
		-ms-transform: perspective(400px) rotateX(10deg);
		transform: perspective(400px) rotateX(10deg)
	}
	100% {
		-webkit-transform: perspective(400px) rotateX(0deg);
		-ms-transform: perspective(400px) rotateX(0deg);
		transform: perspective(400px) rotateX(0deg);
		opacity: 1
	}
}

.flipInX {
	-webkit-backface-visibility: visible!important;
	-ms-backface-visibility: visible!important;
	backface-visibility: visible!important;
	-webkit-animation-name: flipInX;
	animation-name: flipInX
}

@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}
50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}
70%{-webkit-transform:scale(.9);transform:scale(.9)}
100%{-webkit-transform:scale(1);transform:scale(1)}
}
@keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3)}
50%{opacity:1;-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}
70%{-webkit-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9)}
100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
}
.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}