@-webkit-keyframes anim-layout-show-bottom {
	0% {
		opacity: 0;
		transform: translateY(80px);
	}
	
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

.layout-anim-show-bottom {
	-webkit-animation: anim-layout-show-bottom 0.7s ease-in-out;
	animation-fill-mode: forwards;
}

@-webkit-keyframes anim-layout-show-scale {
	0% {
		opacity: 0;
		transform-origin: left top;
		transform: scale(1.2);
	}
	
	100% {
		opacity: 1;
		transform-origin: left top;
		transform: scale(1);
	}
}

.layout-anim-show-scale {
	-webkit-animation: anim-layout-show-scale 0.7s ease-in-out;
	animation-fill-mode: forwards;
}

@-webkit-keyframes anim-layout-show-left {
	0% {
		opacity: 0;
		transform: translateX(-150px);
	}
	
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}

.layout-anim-show-left {
	-webkit-animation: anim-layout-show-left 0.7s ease-in-out;
	animation-fill-mode: forwards;
}

@-webkit-keyframes anim-layout-show-right {
	0% {
		opacity: 0;
		transform: translateX(150px);
	}
	
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}

.layout-anim-show-right {
	-webkit-animation: anim-layout-show-right 0.7s ease-in-out;
	animation-fill-mode: forwards;
}

.none-opacity {
	opacity: 0;
}

@-webkit-keyframes anim-card-img-rotate-show {
	0% {
		transform: rotateY(0deg);
	}
	
	50% {
		transform: rotateY(90deg);
	}
	
	100% {
		transform: rotateY(0deg);
	}
}

.card-img-rotate-show {
	-webkit-animation: anim-card-img-rotate-show 0.2s ease-in;
}

/*  */
@-webkit-keyframes animate-opacity-show {
	0% {
		opacity: 0
	}

	50% {
		opacity: .5;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes animate-opacity-hide {
	0% {
		opacity: 1
	}

	50% {
		opacity: .5;
	}

	100% {
		opacity: 0;
	}
}

.opacity-show {
	-webkit-animation: animate-opacity-show 0.3s ease-in;
}

/*  */
@-webkit-keyframes animate-menu-scale-show {
	0% {
		/* transform: scale(0); */
		/* transform-origin: 100% 0; */
		height: 0;
		opacity: 0;
	}

	/* 	50% {
		transform: scale(1)
	} */

	100% {
		/* transform: scale(1) */
		height: 160px;
		opacity: 1;
	}
}

@-webkit-keyframes animate-menu-scale-hide {
	0% {
		transform: scale(1);
		/* transform-origin: 0 0; */
	}

	50% {
		transform: scale(0.5)
	}

	100% {
		transform: scale(0)
	}
}

/* step 专属动画 */

/* step1 */
@-webkit-keyframes animate-step1-scale-show {
	0% {
		opacity: 0;
		transform: scale(0.5, 0.5);
		transform-origin: left top;
	}

	100% {
		opacity: 1;
		transform: scale(1, 1);
		transform-origin: left top;
	}
}

@-webkit-keyframes animate-step1-scale-hide {
	0% {
		opacity: 1;
		transform: scale(1, 1);
		transform-origin: left top;
	}

	100% {
		opacity: 0;
		transform: scale(0.5, 0.5);
		transform-origin: left top;
	}

}


.step1-show {
	-webkit-animation: animate-step1-scale-show 0.3s linear;
}

.step1-hide {
	-webkit-animation: animate-step1-scale-hide 0.3s linear;
}

/* step2 */
@-webkit-keyframes animate-step2-scale-show {
	0% {
		opacity: 0;
		transform: scale(0.5, 0.5);
		transform-origin: right top;
	}

	100% {
		opacity: 1;
		transform: scale(1, 1);
		transform-origin: right top;
	}
}

@-webkit-keyframes animate-step2-scale-hide {
	0% {
		opacity: 1;
		transform: scale(1, 1);
		transform-origin: right top;
	}

	100% {
		opacity: 0;
		transform: scale(0.5, 0.5);
		transform-origin: right top;
	}

}


.step2-show {
	-webkit-animation: animate-step2-scale-show 0.3s linear;
}

.step2-hide {
	-webkit-animation: animate-step2-scale-hide 0.3s linear;
}

/* step3 */
@-webkit-keyframes animate-step3-scale-show {
	0% {
		opacity: 0;
		transform: scale(0.25, 0.5);
		transform-origin: left bottom;
	}

	100% {
		opacity: 1;
		transform: scale(1, 1);
		transform-origin: left bottom;
	}
}

@-webkit-keyframes animate-step3-scale-hide {
	0% {
		opacity: 1;
		transform: scale(1, 1);
		transform-origin: left bottom;
	}

	100% {
		opacity: 0;
		transform: scale(0.25, 0.5);
		transform-origin: left bottom;
	}

}


.step3-show {
	-webkit-animation: animate-step3-scale-show 0.3s linear;
}

.step3-hide {
	-webkit-animation: animate-step3-scale-hide 0.3s linear;
}

/* step4 */
@-webkit-keyframes animate-step4-scale-show {
	0% {
		opacity: 0;
		transform: scale(0.5, 0.5);
		transform-origin: center bottom;
	}

	100% {
		opacity: 1;
		transform: scale(1, 1);
		transform-origin: center bottom;
	}
}

@-webkit-keyframes animate-step4-scale-hide {
	0% {
		opacity: 1;
		transform: scale(1, 1);
		transform-origin: center bottom;
	}

	100% {
		opacity: 0;
		transform: scale(0.5, 0.5);
		transform-origin: center bottom;
	}

}


.step4-show {
	-webkit-animation: animate-step4-scale-show 0.3s linear;
}

.step4-hide {
	-webkit-animation: animate-step4-scale-hide 0.3s linear;
}

/* step5 */
@-webkit-keyframes animate-step5-scale-show {
	0% {
		opacity: 0;
		transform: scale(0.25, 0.5);
		transform-origin: right bottom;
	}

	100% {
		opacity: 1;
		transform: scale(1, 1);
		transform-origin: right bottom;
	}
}

@-webkit-keyframes animate-step5-scale-hide {
	0% {
		opacity: 1;
		transform: scale(1, 1);
		transform-origin: right bottom;
	}

	100% {
		opacity: 0;
		transform: scale(0.25, 0.5);
		transform-origin: right bottom;
	}

}


.step5-show {
	-webkit-animation: animate-step5-scale-show 0.3s linear;
}

.step5-hide {
	-webkit-animation: animate-step5-scale-hide 0.3s linear;
}