.mantitleAni {
	-moz-animation: mantitleAni 0.6s 1;
	-webkit-animation: mantitleAni 0.6s 1;
	-o-animation: mantitleAni 0.6s 1;
	animation: mantitleAni 0.6s 1;
	animation-fill-mode: forwards;
}

@keyframes mantitleAni {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.3);
		-moz-transform: scale(0.3);
		-o-transform: scale(0.3);
		transform: scale(0.3)
	}

	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1)
	}
}


.introAni {
	-moz-animation: introAni 0.6s 1;
	-webkit-animation: introAni 0.6s 1;
	-o-animation: introAni 0.6s 1;
	animation: introAni 0.6s 1;
	animation-fill-mode: forwards;
}

@keyframes introAni {
	0% {
		opacity: 0;
		-webkit-transform: translateY(2rem);
		-moz-transform: translateY(2rem);
		-o-transform: translateY(2rem);
		transform: translateY(2rem);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
}

.tipAni {
	-moz-animation: tipAni 2s infinite;
	-webkit-animation: tipAni 2s infinite;
	-o-animation: tipAni 2s infinite;
	animation: tipAni 2s infinite;
	animation-fill-mode: forwards;
}

@keyframes tipAni {
	0% {
		opacity: 0.9;
		-webkit-transform: scale(1) rotate(-25deg);
		-moz-transform: scale(1) rotate(-25deg);
		-o-transform: scale(1) rotate(-25deg);
		transform: scale(1) rotate(-25deg)
	}

	50% {
		opacity: 1;
		-webkit-transform: scale(1.15) rotate(-25deg);
		-moz-transform: scale(1.15) rotate(-25deg);
		-o-transform: scale(1.15) rotate(-25deg);
		transform: scale(1.15) rotate(-25deg)
	}
	100% {
		opacity: 0.9;
		-webkit-transform: scale(1) rotate(-25deg);
		-moz-transform: scale(1) rotate(-25deg);
		-o-transform: scale(1) rotate(-25deg);
		transform: scale(1) rotate(-25deg)
	}
}

.cardUpAni {
	-moz-animation: cardUpAni 4s infinite linear;
	-webkit-animation: cardUpAni 4s infinite linear;
	-o-animation: cardUpAni 4s infinite linear;
	animation: cardUpAni 4s infinite linear;
	animation-fill-mode: forwards;
}

@keyframes cardUpAni {
	0% {
		-webkit-transform: translateY(0vw);
		-moz-transform: translateY(0vw);
		-o-transform: translateY(0vw);
		transform: translateY(0vw)
	}

	50% {
		-webkit-transform: translateY(-1vw);
		-moz-transform: translateY(-1vw);
		-o-transform: translateY(-1vw);
		transform: translateY(-1vw)
	}
	100% {
		-webkit-transform: translateY(0vw);
		-moz-transform: translateY(0vw);
		-o-transform: translateY(0vw);
		transform: translateY(0vw)
	}
}

.cardDownAni {
	-moz-animation: cardDownAni 4s infinite linear;
	-webkit-animation: cardDownAni 4s infinite linear;
	-o-animation: cardDownAni 4s infinite linear;
	animation: cardDownAni 4s infinite linear;
	animation-fill-mode: forwards;
}

@keyframes cardDownAni {
	0% {
		-webkit-transform: translateY(-0.5vw);
		-moz-transform: translateY(-0.5vw);
		-o-transform: translateY(-0.5vw);
		transform: translateY(-0.5vw)
	}
	
	50% {
		-webkit-transform: translateY(0.5vw);
		-moz-transform: translateY(0.5vw);
		-o-transform: translateY(0.5vw);
		transform: translateY(0.5vw)
	}
	100% {
		-webkit-transform: translateY(-0.5vw);
		-moz-transform: translateY(-0.5vw);
		-o-transform: translateY(-0.5vw);
		transform: translateY(-0.5vw)
	}
}

@keyframes chuan {
	0% {
		left: 46.72%;
	}

	25% {
		left: 41.72%;
	}

	50% {
		left: 46.72%;
	}

	75% {
		left: 51.72%;
	}

	100% {
		left: 46.72%;
	}
}

@keyframes hehua {
	0% {
		transform: rotateZ(0deg);
	}

	25% {
		transform: rotateZ(-2deg);
	}


	50% {
		transform: rotateZ(0deg);
	}

	75% {
		transform: rotateZ(2deg);
	}

	100% {
		transform: rotateZ(0deg);
	}
}

@keyframes spotAni {
	0% {
		transform: scale(1) rotate(0);
	}

	/* 50% {
		transform: scale(0.6) rotate(180deg);
	} */

	100% {
		transform: scale(1) rotate(360deg);
	}
}

@keyframes titleAni {
	0% {
		transform: scale(0);
		opacity: 0;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes cloudLeftAni {
	0% {
		transform: translateX(0);
		opacity: 1;
	}

	100% {
		transform: translateX(-100%);
		opacity: 0;
	}
}

@keyframes cloudRightAni {
	0% {
		transform: translateX(0);
		opacity: 1;
	}

	100% {
		transform: translateX(100%);
		opacity: 0;
	}
}


@keyframes yanAni {
	0% {
		transform: translateX(0);
	}
	
	
	49%{
		transform: translate(-2rem,-2rem);
	}
	50% {
		transform: translate(-2rem,-2rem) scaleX(-1);
		/* transform: translate(-2rem,-2rem); */
	}
	
	99% {
		transform: translate(0) scaleX(-1);
		/* transform: translate(-2rem,-2rem); */
	}
	100% {
		transform: translate(0) scaleX(1);
	}
}

/* @keyframes tipAni {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-100%);
	}
} */

@keyframes ticketAni {
	0% {
		opacity: 0.5;
	}
	
	50% {
		opacity: 1;
	}

	100% {
		opacity: 0.5;
	}
}

.page3 .selected .tk {
	animation: ticketAni 1.5s linear infinite;
	animation-delay: 0.5s;
}

.page2 .hehua {
	transform-origin: 20% 100%;
	animation: hehua 6s linear infinite;
}

.normal .chuan {
	animation: chuan linear infinite 30s;
}

.normal .yun {
	animation: chuan linear infinite 50s;
}

.page4 .heye {
    transform-origin: 0% 100%;
	animation: hehua 5s linear infinite;
}

.spotAni {
	animation: spotAni linear infinite 3s forwards;
}

.page0 .yun {
	animation: chuan linear infinite 20s;
}

.titleAni {
	animation: titleAni linear 1 0.4s forwards;
}

.cloudLeftAni {
	animation: cloudLeftAni linear 1 1.5s forwards;
}

.cloudRightAni {
	animation: cloudRightAni linear 1 1.5s forwards;
}

.yanAni {
	animation: yanAni linear infinite 8s forwards;
}

.subContainer .tip{
	animation: tipAni linear infinite 1s forwards;
}

.leftAni {
	animation: leftAni 20s linear infinite;
}

@keyframes leftAni {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: -200% 0;
	}
}