@charset "utf-8";



/*up,down,transform1,transform2*/

.up, .down, .transform1, .transform2 {
	position: relative;
	opacity: 0;	
}

/*up,down,transform1,transform*/

.upstyle, .downstyle, .transform1style, .transform2style {
	opacity: 1;	
	transition: 1s 0.5s;
}


.up {
	bottom: -20px;
}

.upstyle {
	bottom: 0px;
}

.down {
	top: -20px;
}

.downstyle {
	top: 0px;
}

.transform1 {
	transform: scaleX(0);
}

.transform1style {
	transform: scaleX(1);
}

/*transform2*/

.transform2 {
	transform: perspective(400px) translateZ(-70px) rotateX(50deg);
}

.transform2style {
	transform: perspective(400px) translateZ(0px) rotateX(0deg);
}


/*blur*/

.blur {
	opacity: 0;	
	filter: blur(30px);
	transform: scale(1.1);
}

.blurstyle {
	opacity: 1;
	filter: blur(0);
	transform: scale(1);
	transition: 1s 0.5s;
}


/*transform3*/

@keyframes transform3 {
0% {
	transform: scale(0);
}
50% {
	transform: scale(1.1);
}
70% {
	transform: scale(0.99);
}
100% {
	transform: scale(1);
}
}

.transform3 {
	transform: scale(0);
}

.transform3style {
	animation: transform3 0.3s ease-out 0.5s both;
}