/**
 *
 * Animation css
 *
 * 20141113
 *
 */


/* --------------------------------------------------------------------- */
/* rotation A */
/* 
/* 要素回転 */
/* --------------------------------------------------------------------- */

.clu {
	-webkit-animation-duration: 0.4s;
					animation-duration: 0.4s;
	-webkit-animation-fill-mode: both;
					animation-fill-mode: both;
	-webkit-transform-origin: 50% 50% 0px;
					transform-origin: 50% 50% 0px;
	-webkit-animation-iteration-count: infinite;
					animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
					animation-timing-function: linear;
	-webkit-animation-name: rotation;
					animation-name: rotation;
	}
	@-webkit-keyframes rotation {
		form {
			-webkit-transform:rotate(0deg);
							transform:rotate(0deg);
		}
		to {
			-webkit-transform:rotate(-360deg);
							transform:rotate(-360deg);
		}
	}
	@-moz-keyframes rotation {
		form {
			-moz-transform:rotate(0deg);
						transform:rotate(0deg);
		}
		to {
			-moz-transform:rotate(-360deg);
					 transform:rotate(-360deg);
		}
	}
	@-ms-keyframes rotation {
		form {
			-ms-transform:rotate(0deg);
					transform:rotate(0deg);
		}
		to {
			-ms-transform:rotate(-360deg);
					transform:rotate(-360deg);
		}
	}
	@keyframes rotation {
		form {
			transform:rotate(0deg);
		}
		to {
			transform:rotate(-360deg);
		}
	}


/* --------------------------------------------------------------------- */
/* rotation B */
/* 
/* 要素をゆっくりと回転 */
/* --------------------------------------------------------------------- */

.roat {
	-webkit-animation-duration: 40s;
					animation-duration: 40s;
	-webkit-animation-fill-mode: both;
					animation-fill-mode: both;
	-webkit-transform-origin: 50% 50% 0px;
					transform-origin: 50% 50% 0px;
	-webkit-animation-iteration-count: infinite;
					animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
					animation-timing-function: linear;
	-webkit-animation-name: roat;
					animation-name: roat;
	}
	@-webkit-keyframes roat {
		form {
			-webkit-transform:rotate(0deg);
							transform:rotate(0deg);
		}
		to {
			-webkit-transform:rotate(-360deg);
							transform:rotate(-360deg);
		}
	}
	@-moz-keyframes roat {
		form {
			-moz-transform:rotate(0deg);
					 transform:rotate(0deg);
		}
		to {
			-moz-transform:rotate(-360deg);
					 transform:rotate(-360deg);
		}
	}
	@-ms-keyframes roat {
		form {
			-ms-transform:rotate(0deg);
					transform:rotate(0deg);
		}
		to {
			-ms-transform:rotate(-360deg);
					transform:rotate(-360deg);
		}
	}
	@keyframes roat {
		form {
			transform:rotate(0deg);
		}
		to {
			transform:rotate(-360deg);
		}
	}


/* --------------------------------------------------------------------- */
/* rotation C */
/* 
/* アイコンなどのホバー時 回転設定 */
/* --------------------------------------------------------------------- */

.cute {
	-webkit-animation-duration: 0.5s;
					animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
					animation-fill-mode: both;
	-webkit-transform-origin: 50% 50%;
					transform-origin: 50% 50%;
	-webkit-animation-iteration-count: 1;
    		  animation-iteration-count: 1;
  -webkit-animation-name: cute;
					animation-name: cute;
	}
	@-webkit-keyframes cute {
		form {
			-webkit-transform:rotate(0deg);
							transform:rotate(0deg);
		}
		to {
			-webkit-transform:rotate(-180deg);
							transform:rotate(-180deg);
		}
	}
	@-moz-keyframes cute {
		form {
			-moz-transform:rotate(0deg);
					 transform:rotate(0deg);
		}
		to {
			-moz-transform:rotate(-180deg);
					 transform:rotate(-180deg);
		}
	}
	@-ms-keyframes cute {
		form {
			-ms-transform:rotate(0deg);
					transform:rotate(0deg);
		}
		to {
			-ms-transform:rotate(-180deg);
					transform:rotate(-180deg);
		}
	}
	@keyframes cute {
		form {
			transform:rotate(0deg);
		}
		to {
			transform:rotate(-180deg);
		}
	}


/* --------------------------------------------------------------------- */
/* bound A */
/* 
/* バウンド設定 */
/* --------------------------------------------------------------------- */
.ex {
	-webkit-animation-duration: 1.5s;
					animation-duration: 1.5s;
	-webkit-animation-fill-mode: both;
					animation-fill-mode: both;
	-webkit-transform-origin: 50% 100% 0px;
					transform-origin: 50% 100% 0px;
/*	-webkit-animation-iteration-count: infinite;
					animation-iteration-count: infinite;*/
	-webkit-animation-name: bound;
					animation-name: bound;
	}

.bound {
	-webkit-animation-duration: 1.5s;
					animation-duration: 1.5s;
	-webkit-animation-fill-mode: both;
					animation-fill-mode: both;
	-webkit-transform-origin: 50% 100% 0px;
					transform-origin: 50% 100% 0px;
	-webkit-animation-iteration-count: infinite;
					animation-iteration-count: infinite;
	-webkit-animation-name: bound;
					animation-name: bound;
	}
	@-webkit-keyframes bound {
		0% {
			-webkit-transform: scale3d(1, 1, 1);
							transform: scale3d(1, 1, 1);
		}
		30% {
			-webkit-transform: scale3d(1, 0.75, 1);
							transform: scale3d(1, 0.75, 1);
		}
		40% {
			-webkit-transform: scale3d(1, 1.05, 1);
							transform: scale3d(1, 1.05, 1);
		}
		50% {
			-webkit-transform: scale3d(1, 0.75, 1);
							transform: scale3d(1, 0.75, 1);
			-webkit-transform: translateY(-10px);
							transform: translateY(-10px);
		}
		65% {
			-webkit-transform: scale3d(1, 1.05, 1);
							transform: scale3d(1, 1.05, 1);
		}
		75% {
			-webkit-transform: scale3d(1, 0.95, 1);
							transform: scale3d(1, 0.95, 1);
		}
		100% {
			-webkit-transform: scale3d(1, 1, 1);
							transform: scale3d(1, 1, 1);
		}
	}
	@keyframes bound {
		0% {
			-webkit-transform: scale3d(1, 1, 1);
							transform: scale3d(1, 1, 1);
		}
		30% {
			-webkit-transform: scale3d(1, 0.75, 1);
							transform: scale3d(1, 0.75, 1);
		}
		40% {
			-webkit-transform: scale3d(1, 1.05, 1);
							transform: scale3d(1, 1.05, 1);
		}
		50% {
			-webkit-transform: scale3d(1, 0.75, 1);
							transform: scale3d(1, 0.75, 1);
			-webkit-transform: translateY(-10px);
							transform: translateY(-10px);
		}
		65% {
			-webkit-transform: scale3d(1, 1.05, 1);
							transform: scale3d(1, 1.05, 1);
		}
		75% {
			-webkit-transform: scale3d(1, 0.95, 1);
							transform: scale3d(1, 0.95, 1);
		}
		100% {
			-webkit-transform: scale3d(1, 1, 1);
							transform: scale3d(1, 1, 1);
		}
	}


/* --------------------------------------------------------------------- */
/* bound B */
/* 
/* バウンド設定Aよりも早いタイミング */
/* --------------------------------------------------------------------- */

	@-webkit-keyframes bound_b {
		0% {
			-webkit-transform: scale3d(1, 1, 1);
							transform: scale3d(1, 1, 1);
		}
		30% {
			-webkit-transform: scale3d(1, 0.85, 1);
							transform: scale3d(1, 0.85, 1);
		}	
		40% {
			-webkit-transform: scale3d(1, 1.05, 1);
							transform: scale3d(1, 1.05, 1);
		}
		50% {
			-webkit-transform: scale3d(1, 0.85, 1);
							transform: scale3d(1, 0.85, 1);
			-webkit-transform: translateY(-5px);
							transform: translateY(-5px);
		}
		65% {
			-webkit-transform: scale3d(1, 1.05, 1);
							transform: scale3d(1, 1.05, 1);
		}
		75% {
			-webkit-transform: scale3d(1, 0.95, 1);
							transform: scale3d(1, 0.95, 1);
		}
		100% {
			-webkit-transform: scale3d(1, 1, 1);
							transform: scale3d(1, 1, 1);
		}
	}
	@keyframes bound_b {
		0% {
			-webkit-transform: scale3d(1, 1, 1);
							transform: scale3d(1, 1, 1);
		}
		30% {
			-webkit-transform: scale3d(1, 0.85, 1);
							transform: scale3d(1, 0.85, 1);
		}
		40% {
			-webkit-transform: scale3d(1, 1.05, 1);
							transform: scale3d(1, 1.05, 1);
		}
		50% {
			-webkit-transform: scale3d(1, 0.85, 1);
							transform: scale3d(1, 0.85, 1);
			-webkit-transform: translateY(-5px);
							transform: translateY(-5px);
		}
		65% {
			-webkit-transform: scale3d(1, 1.05, 1);
							transform: scale3d(1, 1.05, 1);
		}
		75% {
			-webkit-transform: scale3d(1, 0.95, 1);
							transform: scale3d(1, 0.95, 1);
		}
		100% {
			-webkit-transform: scale3d(1, 1, 1);
							transform: scale3d(1, 1, 1);
		}
	}


/* --------------------------------------------------------------------- */
/* slow icon */
/* 
/* 要素を片側上下にゆっくりとアニメーション */
/* --------------------------------------------------------------------- */

.slowly {
	-webkit-transform-origin: 100% 0%;
	-webkit-animation-name: slowlyIcon;
	-webkit-animation-duration: 3.3s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
	-webkit-animation-play-state: running;
	-webkit-animation-delay: 0s;
	-moz-transform-origin: 100% 0%;
	-moz-animation-name: slowlyIcon;
	-moz-animation-duration: 3.3s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: normal;
	-moz-animation-play-state: running;
	-moz-animation-delay: 0s;
	-ms-transform-origin: 100% 0%;
	-ms-animation-name: slowlyIcon;
	-ms-animation-duration: 3.3s;
	-ms-animation-iteration-count: infinite;
	-ms-animation-direction: normal;
	-ms-animation-play-state: running;
	-ms-animation-delay: 0s;
	-o-transform-origin: 100% 0%;
	-o-animation-name: slowlyIcon;
	-o-animation-duration: 3.3s;
	-o-animation-iteration-count: infinite;
	-o-animation-direction: normal;
	-o-animation-play-state: running;
	-o-animation-delay: 0s;
	transform-origin: 100% 0%;
	animation-name: slowlyIcon;
	animation-duration: 3.3s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-play-state: running;
	animation-delay: 0s;
	}
	@-webkit-keyframes slowlyIcon {
		0%{
			-webkit-transform: rotate(0deg);
			animation-timing-function: ease-in;
		}
		50%{
			-webkit-transform: translate(3px, 0px) rotate(5deg);
			animation-timing-function: ease-out;
		}
		100%{
			-webkit-transform: rotate(0deg);
			animation-timing-function: ease-in;
		}
	}
	@-moz-keyframes slowlyIcon {
		0%{
			-moz-transform: rotate(0deg);
			animation-timing-function: ease-in;
		}
		50%{
			-moz-transform: translate(3px, 0px) rotate(5deg);
			animation-timing-function: ease-out;
		}
		100%{
			-moz-transform: rotate(0deg);
			animation-timing-function: ease-in;
		}
	}
	@-ms-keyframes slowlyIcon {
		0%{
			-ms-transform: rotate(0deg);
			animation-timing-function: ease-in;
		}
		50%{
			-ms-transform: translate(3px, 0px) rotate(5deg);
			animation-timing-function: ease-out;
		}
		100%{
			-ms-transform: rotate(0deg);
			animation-timing-function: ease-in;
		}
	}
	@-o-keyframes slowlyIcon {
		0%{
			-o-transform: rotate(0deg);
			animation-timing-function: ease-in;
		}
		50%{
			-o-transform: translate(3px, 0px) rotate(5deg);
			animation-timing-function: ease-out;
		}
		100%{
			-o-transform: rotate(0deg);
			animation-timing-function: ease-in;
		}
	}
	@keyframes slowlyIcon {
		0%{
			transform: rotate(0deg);
			animation-timing-function: ease-in;
		}
		50%{
			transform: translate(3px, 0px) rotate(5deg);
			animation-timing-function: ease-out;
		}
		100%{
			transform: rotate(0deg);
			animation-timing-function: ease-in;
		}
	}