/* ぼかしから出現 */
.blur{
	animation-name:blurAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
    from {
	filter: blur(10px);
	transform: scale(1.02);
    }

    to {
	filter: blur(0);
	transform: scale(1);
    }
}

/* top fade in + slide in */

.anim-box{
	animation-name:fadeupAnime;
	animation-duration:2s;
	animation-fill-mode:forwards;
}

@keyframes fadeupAnime {
	0% {
	transform: translateY(30px);
	opacity: 0;
	}
	80% {
	opacity: 1;
	}
	100% {
	opacity: 1;
	transform: translateY(0);
	}
}

/* top fade in + slide in */

/* スライドイン */

/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.box{
	opacity: 0;
}

/*==================================================
動かしたい動き（今回は” ふわっ” を採用）
===================================*/

.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
from {
    opacity: 0;
	transform: translateY(100px);
}

to {
    opacity: 1;
	transform: translateY(0);
}
}

/*==================================================
ホバー
===================================*/