@charset "utf-8";

/*===========================================================================*/

/*

キーフレームだけのcssクラス

適用例）
<div class="js-addclass-scroll-pattern" data-addname="fv_img_anime">
〜〜
</div>


-webkit-animation: _start [time] forwards [time];
animation: _start [time] forwards [time];
*/

/*===========================================================================*/

/*ほわっと出てくる*/

@keyframes blur_and_alpha_start {
	0% {filter: blur(6px); transform: translate(0px, -20px); opacity: 0; }
	100% {filter: blur(0px); transform: translate(0px, 0px); opacity: 1; }
}

/*横から出てくる*/

@keyframes side_start {
	0% {transform: translate(-40px, 0px); opacity: 0; }
	100% {transform: translate(0px, 0px); opacity: 1; }
}

/*拡大して出てくる*/

@keyframes scale_start {
	0% {transform: scale(1.15); opacity: 0; }
	100% {transform: scale(1); opacity: 1; }
}

/*透明度から出てくる*/

@keyframes alpha_start {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes alpha_end {
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes alpha_start2 {
	10% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

/*下から出てくる*/

@keyframes bottom_start {
	97% {transform: translate(0px, 0px); opacity: 1; }
	100% {transform: translate(0px, 0px); opacity: 1; }
}

@keyframes bottom_start2 {
	0% {transform: translate(0px, 50px); opacity: 0; }
	100% {transform: translate(0px, 0px); opacity: 1; }
}

@keyframes bottom_start3 {
	0% {transform: translate(0px, -10px); opacity: 0; }
	100% {transform: translate(0px, 0px); opacity: 1; }
}


/*初期値*/

.alpha{ opacity: 0; }
.scale{ transform: scale(0); }


/*サンプル*/

.sample {
	-webkit-animation: alpha_end 0s forwards;
	animation: alpha_end 10s forwards;
}