/*

■ CSS3 - transform プロパティの書き方

	□ 行列を使用した2D変形 と 行列を使用した3D変形

	matrix( 数値, 数値, 数値, 数値, 数値, 数値 )
	matrix3d( 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値 )

	□ 移動

	translate( X方向の移動距離, Y方向の移動距離 )
	translateX( X方向の移動距離 )
	translateY( Y方向の移動距離 )
	translateZ( Z方向の移動距離 )
	translate3d( X方向の移動距離, Y方向の移動距離, Z方向の移動距離 )

	□ 縮尺

	scale( X方向の縮尺比率, Y方向の縮尺比率 )
	scaleX( X方向の縮尺比率 )
	scaleY( Y方向の縮尺比率 )
	scaleZ( Z方向の縮尺比率 )
	scale3d( X方向の縮尺比率, Y方向の縮尺比率, Z方向の縮尺比率 )

	□ 回転

	rotate( 回転角度 )
	rotate3d( 数値, 数値, 数値, 回転角度 )
	rotateX( X軸を軸とする回転角度 )
	rotateY( Y軸を軸とする回転角度 )
	rotateZ( Z軸を軸とする回転角度 )

	□ 傾斜

	skew( X軸の傾斜角度, Y軸の傾斜角度 )
	skewX( X軸の傾斜角度 )
	skewY( Y軸の傾斜角度 )

	□ 遠近効果

	perspective( 数値 )


■ CSS3 - animation 関連のプロパティ一覧

	animation-name
	animation-duration
	animation-timing-function
	animation-delay
	animation-iteration-count
	animation-direction

■ keyframes 定義の例

@-webkit-keyframes XXX {
	  0% { ; }
	100% { ; }
}

@-moz-keyframes XXX {
	  0% { ; }
	100% { ; }
}

@-o-keyframes XXX {
	  0% { ; }
	100% { ; }
}

@keyframes XXX {
	  0% { ; }
	100% { ; }
}

.XXX {
    -webkit-animation-name: XXX;
    -moz-animation-name: XXX;
    -o-animation-name: XXX;
    animation-name: XXX;
}

*/

/*======= manpuKururinDon =======*/
@-webkit-keyframes manpuKururinDon {
	  0% { -webkit-transform: scale( 3 ) rotate( -360deg ); opacity: 0; }
	 70% { -webkit-transform: scale( 1 ) rotate(    0deg ); opacity: 1; }
	 75% { -webkit-transform: translate( -8px, -3px ); }
	 80% { -webkit-transform: translate(  9px,  3px ); }
	 85% { -webkit-transform: translate(  2px, -6px ); }
	 90% { -webkit-transform: translate( -7px, -9px ); }
	 95% { -webkit-transform: translate( -1px,  8px ); }
	100% { -webkit-transform: translate(  0px,  0px ); }
}
@-moz-keyframes manpuKururinDon {
	  0% { -moz-transform: scale( 3 ) rotate( -360deg ); opacity: 0; }
	 70% { -moz-transform: scale( 1 ) rotate(    0deg ); opacity: 1; }
	 75% { -moz-transform: translate( -8px, -3px ); }
	 80% { -moz-transform: translate(  9px,  3px ); }
	 85% { -moz-transform: translate(  2px, -6px ); }
	 90% { -moz-transform: translate( -7px, -9px ); }
	 95% { -moz-transform: translate( -1px,  8px ); }
	100% { -moz-transform: translate(  0px,  0px ); }
}
@-o-keyframes manpuKururinDon {
	  0% { -o-transform: scale( 3 ) rotate( -360deg ); opacity: 0; }
	 70% { -o-transform: scale( 1 ) rotate(    0deg ); opacity: 1; }
	 75% { -o-transform: translate( -8px, -3px ); }
	 80% { -o-transform: translate(  9px,  3px ); }
	 85% { -o-transform: translate(  2px, -6px ); }
	 90% { -o-transform: translate( -7px, -9px ); }
	 95% { -o-transform: translate( -1px,  8px ); }
	100% { -o-transform: translate(  0px,  0px ); }
}
@keyframes manpuKururinDon {
	  0% { transform: scale( 3 ) rotate( -360deg ); opacity: 0; }
	 70% { transform: scale( 1 ) rotate(    0deg ); opacity: 1; }
	 75% { transform: translate( -8px, -3px ); }
	 80% { transform: translate(  9px,  3px ); }
	 85% { transform: translate(  2px, -6px ); }
	 90% { transform: translate( -7px, -9px ); }
	 95% { transform: translate( -1px,  8px ); }
	100% { transform: translate(  0px,  0px ); }
}
.manpuKururinDon {
	-webkit-animation-name: manpuKururinDon;
	-moz-animation-name: manpuKururinDon;
	-s-animation-name: manpuKururinDon;
	animation-name: manpuKururinDon;
}

/*====== manpuLeftUp =======*/

@-webkit-keyframes manpuLeftUp {
	  0% { opacity: 0; }
	 50% { opacity: 1; }
	100% { -webkit-transform: translate( -25px, -25px ); opacity: 0; }
}
@-moz-keyframes manpuLeftUp {
	  0% { opacity: 0; }
	 50% { opacity: 1; }
	100% { -moz-transform: translate( -25px, -25px ); opacity: 0; }
}
@-o-keyframes manpuLeftUp {
	  0% { opacity: 0; }
	 50% { opacity: 1; }
	100% { -o-transform: translate( -25px, -25px ); opacity: 0; }
}
@keyframes manpuLeftUp {
	  0% { opacity: 0; }
	 50% { opacity: 1; }
	100% { transform: translate( -25px, -25px ); opacity: 0; }
}
.manpuLeftUp {
	-webkit-animation-name: manpuLeftUp;
	-moz-animation-name: manpuLeftUp;
	-o-animation-name: manpuLeftUp;
	animation-name: manpuLeftUp;
}

/*====== manpuLeftDown =====*/

@-webkit-keyframes manpuLeftDown {
	  0% { opacity: 0; }
	 50% { opacity: 1; }
	100% { -webkit-transform: translate( -25px, 25px ); opacity: 0; }
}
@-moz-keyframes manpuLeftDown {
	  0% { opacity: 0; }
	 50% { opacity: 1; }
	100% { -moz-transform: translate( -25px, 25px ); opacity: 0; }
}
@-o-keyframes manpuLeftDown {
	  0% { opacity: 0; }
	 50% { opacity: 1; }
	100% { -o-transform: translate( -25px, 25px ); opacity: 0; }
}
@keyframes manpuLeftDown {
	  0% { opacity: 0; }
	 50% { opacity: 1; }
	100% { transform: translate( -25px, 25px ); opacity: 0; }
}
.manpuLeftDown {
	-webkit-animation-name: manpuLeftDown;
	-moz-animation-name: manpuLeftDown;
	-o-animation-name: manpuLeftDown;
	animation-name: manpuLeftDown;
}

/*======= manpuKiran =======*/

@-webkit-keyframes manpuKiran {
	  0% { -webkit-transform: rotate( 720deg ) scale( 0 ); opacity: 0; }
	 50% { opacity: 1; }
	100% { -webkit-transform: rotate(   0deg ) scale( 1 ); opacity: 0; }
}
@-moz-keyframes manpuKiran {
	  0% { -moz-transform: rotate( 720deg ) scale( 0 ); opacity: 0; }
	 50% { opacity: 1; }
	100% { -moz-transform: rotate(   0deg ) scale( 1 ); opacity: 0; }
}
@-o-keyframes manpuKiran {
	  0% { -o-transform: rotate( 720deg ) scale( 0 ); opacity: 0; }
	 50% { opacity: 1; }
	100% { -o-transform: rotate(   0deg ) scale( 1 ); opacity: 0; }
}
@keyframes manpuKiran {
	  0% { transform: rotate( 720deg ) scale( 0 ); opacity: 0; }
	 50% { opacity: 1; }
	100% { transform: rotate(   0deg ) scale( 1 ); opacity: 0; }
}
.manpuKiran {
	-webkit-animation-name: manpuKiran;
	-moz-animation-name: manpuKiran;
	-o-animation-name: manpuKiran;
	animation-name: manpuKiran;
}

/*======= manpuHidden ======*/

@-webkit-keyframes manpuHidden {
	  0% { opacity: 0; }
	100% { opacity: 0; }
}
@-moz-keyframes manpuHidden {
	  0% { opacity: 0; }
	100% { opacity: 0; }
}
@-o-keyframes manpuHidden {
	  0% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes manpuHidden {
	  0% { opacity: 0; }
	100% { opacity: 0; }
}
.manpuHidden {
	-webkit-animation-name: manpuHidden;
	-moz-animation-name: manpuHidden;
	-o-animation-name: manpuHidden;
	animation-name: manpuHidden;
}