/*
==============================================
CSS3 ANIMATION CHEAT SHEET
==============================================

Made by Justin Aguilar

www.justinaguilar.com/animations/

Questions, comments, concerns, love letters:
justin@justinaguilar.com
==============================================
*/

/*
==============================================
slideDown
==============================================
*/

/*從上往下滑進來*/
.slideDown{
	animation-name: slideDown;
	-webkit-animation-name: slideDown;
	animation-duration: 1s;
	-webkit-animation-duration: 1s;
	animation-timing-function: ease;
	-webkit-animation-timing-function: ease;
	visibility: visible !important;
}
@keyframes slideDown {
	0% { -webkit-transform: translateY(-100%); }
	50%{ -webkit-transform: translateY(8%); }
	65%{ -webkit-transform: translateY(-4%); }
	80%{ -webkit-transform: translateY(4%); }
	95%{ -webkit-transform: translateY(-2%); }
	100% { -webkit-transform: translateY(0%); }
}
@-webkit-keyframes slideDown {
	0% { -webkit-transform: translateY(-100%); }
	50%{ -webkit-transform: translateY(8%); }
	65%{ -webkit-transform: translateY(-4%); }
	80%{ -webkit-transform: translateY(4%); }
	95%{ -webkit-transform: translateY(-2%); }
	100% { -webkit-transform: translateY(0%); }
}

/*
==============================================
slideUp
==============================================
*/

/*從下往上滑進來*/
.slideUp{
	animation-name: slideUp;
	-webkit-animation-name: slideUp;
	animation-duration: 1s;
	-webkit-animation-duration: 1s;
	animation-timing-function: ease;
	-webkit-animation-timing-function: ease;
	visibility: visible !important;
}
@keyframes slideUp {
	0% { -webkit-transform: translateY(100%); }
	50%{ -webkit-transform: translateY(-8%); }
	65%{ -webkit-transform: translateY(4%); }
	80%{ -webkit-transform: translateY(-4%); }
	95%{ -webkit-transform: translateY(2%); }
	100% { -webkit-transform: translateY(0%); }
}
@-webkit-keyframes slideUp {
	0% { -webkit-transform: translateY(100%); }
	50%{ -webkit-transform: translateY(-8%); }
	65%{ -webkit-transform: translateY(4%); }
	80%{ -webkit-transform: translateY(-4%); }
	95%{ -webkit-transform: translateY(2%); }
	100% { -webkit-transform: translateY(0%); }
}

/*
==============================================
slideLeft
==============================================
*/

/*從右邊滑進來*/
.slideLeft{
	animation-name: slideLeft;
	-webkit-animation-name: slideLeft;
	animation-duration: 1s;
	-webkit-animation-duration: 1s;
	animation-timing-function: ease-in-out;
	-webkit-animation-timing-function: ease-in-out;
	visibility: visible !important;
}
@keyframes slideLeft {
	0% { -webkit-transform: translateX(150%); }
	50%{ -webkit-transform: translateX(-8%); }
	65%{ -webkit-transform: translateX(4%); }
	80%{ -webkit-transform: translateX(-4%); }
	95%{ -webkit-transform: translateX(2%); }
	100% { -webkit-transform: translateX(0%); }
}
@-webkit-keyframes slideLeft {
	0% { -webkit-transform: translateX(150%); }
	50%{ -webkit-transform: translateX(-8%); }
	65%{ -webkit-transform: translateX(4%); }
	80%{ -webkit-transform: translateX(-4%); }
	95%{ -webkit-transform: translateX(2%); }
	100% { -webkit-transform: translateX(0%); }
}

/*
==============================================
slideRight
==============================================
*/

/*從左邊滑進來*/
.slideRight{
	animation-name: slideRight;
	-webkit-animation-name: slideRight;
	animation-duration: 1s;
	-webkit-animation-duration: 1s;
	animation-timing-function: ease-in-out;
	-webkit-animation-timing-function: ease-in-out;
	visibility: visible !important;
}
@keyframes slideRight {
	0% { -webkit-transform: translateX(-150%); }
	50%{ -webkit-transform: translateX(8%); }
	65%{ -webkit-transform: translateX(-4%); }
	80%{ -webkit-transform: translateX(4%); }
	95%{ -webkit-transform: translateX(-2%); }
	100% { -webkit-transform: translateX(0%); }
}
@-webkit-keyframes slideRight {
	0% { -webkit-transform: translateX(-150%); }
	50%{ -webkit-transform: translateX(8%); }
	65%{ -webkit-transform: translateX(-4%); }
	80%{ -webkit-transform: translateX(4%); }
	95%{ -webkit-transform: translateX(-2%); }
	100% { -webkit-transform: translateX(0%); }
}


/*斜角度_往左上角*/
.slideLeftUpper{
	animation-name: slideLeftUpper;
	-webkit-animation-name: slideLeftUpper;
	animation-duration: 1s;
	-webkit-animation-duration: 1s;
	animation-timing-function: ease-in-out;
	-webkit-animation-timing-function: ease-in-out;
	visibility: visible !important;
}
@keyframes slideLeftUpper {
					/*translate(x,y)*/
	0% { transform: translate(150%, 150%); }
	50%{ transform: translate(-8%, -8%); }
	65%{ transform: translate(4%, 4%); }
	80%{ transform: translate(-4%, -4%); }
	95%{ transform: translate(2%, 2%); }
	100% { transform: translate(0%, 0%); }
}
@-webkit-keyframes slideLeftUpper {
	0% { transform: translate(150%, 150%); }
	50%{ transform: translate(-8%, -8%); }
	65%{ transform: translate(4%, 4%); }
	80%{ transform: translate(-4%, -4%); }
	95%{ transform: translate(2%, 2%); }
	100% { transform: translate(0%, 0%); }
}

/*斜角度_往左下角*/
.slideLeftBottom{
	animation-name: slideLeftBottom;
	-webkit-animation-name: slideLeftBottom;
	animation-duration: 1s;
	-webkit-animation-duration: 1s;
	animation-timing-function: ease-in-out;
	-webkit-animation-timing-function: ease-in-out;
	visibility: visible !important;
}
@keyframes slideLeftBottom {
					/*translate(x,y)*/
	0% { transform: translate(150%, -150%); }
	50%{ transform: translate(-8%, 8%); }
	65%{ transform: translate(4%, -4%); }
	80%{ transform: translate(-4%, 4%); }
	95%{ transform: translate(2%, -2%); }
	100% { transform: translate(0%, 0%); }
}
@-webkit-keyframes slideLeftBottom {
	0% { transform: translate(150%, -150%); }
	50%{ transform: translate(-8%, 8%); }
	65%{ transform: translate(4%, -4%); }
	80%{ transform: translate(-4%, 4%); }
	95%{ transform: translate(2%, -2%); }
	100% { transform: translate(0%, 0%); }
}

/*斜角度_往右上角*/
.slideRightUpper{
	animation-name: slideRightUpper;
	-webkit-animation-name: slideRightUpper;
	animation-duration: 1s;
	-webkit-animation-duration: 1s;
	animation-timing-function: ease-in-out;
	-webkit-animation-timing-function: ease-in-out;
	visibility: visible !important;
}
@keyframes slideRightUpper {
					/*translate(x,y)*/
	0% { transform: translate(-150%, 150%); }
	50%{ transform: translate(8%, -8%); }
	65%{ transform: translate(-4%, 4%); }
	80%{ transform: translate(4%, -4%); }
	95%{ transform: translate(-2%, 2%); }
	100% { transform: translate(0%, 0%); }
}
@-webkit-keyframes slideRightUpper {
	0% { transform: translate(-150%, 150%); }
	50%{ transform: translate(8%, -8%); }
	65%{ transform: translate(-4%, 4%); }
	80%{ transform: translate(4%, -4%); }
	95%{ transform: translate(-2%, 2%); }
	100% { transform: translate(0%, 0%); }
}

/*斜角度_往右下角*/
.slideRightBottom{
	animation-name: slideRightBottom;
	-webkit-animation-name: slideRightBottom;
	animation-duration: 1s;
	-webkit-animation-duration: 1s;
	animation-timing-function: ease-in-out;
	-webkit-animation-timing-function: ease-in-out;
	visibility: visible !important;
}
@keyframes slideRightBottom {
					/*translate(x,y)*/
	0% { transform: translate(-150%, -150%); }
	50%{ transform: translate(8%, 8%); }
	65%{ transform: translate(-4%, -4%); }
	80%{ transform: translate(4%, 4%); }
	95%{ transform: translate(-2%, -2%); }
	100% { transform: translate(0%, 0%); }
}
@-webkit-keyframes slideRightBottom {
	0% { transform: translate(-150%, -150%); }
	50%{ transform: translate(8%, 8%); }
	65%{ transform: translate(-4%, -4%); }
	80%{ transform: translate(4%, 4%); }
	95%{ transform: translate(-2%, -2%); }
	100% { transform: translate(0%, 0%); }
}


/*
==============================================
slideExpandUp
==============================================
*/

/*上升~~展開*/
.slideExpandUp{
	animation-name: slideExpandUp;
	-webkit-animation-name: slideExpandUp;
	animation-duration: 1.6s;
	-webkit-animation-duration: 1.6s;
	animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease -out;
	visibility: visible !important;
}

@keyframes slideExpandUp {
	0% {
		transform: translateY(100%) scaleX(0.5);
	}
	30%{
		transform: translateY(-8%) scaleX(0.5);
	}
	40%{
		transform: translateY(2%) scaleX(0.5);
	}
	50%{
		transform: translateY(0%) scaleX(1.1);
	}
	60%{
		transform: translateY(0%) scaleX(0.9);
	}
	70% {
		transform: translateY(0%) scaleX(1.05);
	}
	80%{
		transform: translateY(0%) scaleX(0.95);
	}
	90% {
		transform: translateY(0%) scaleX(1.02);
	}
	100%{
		transform: translateY(0%) scaleX(1);
	}
}

@-webkit-keyframes slideExpandUp {
	0% {
		-webkit-transform: translateY(100%) scaleX(0.5);
	}
	30%{
		-webkit-transform: translateY(-8%) scaleX(0.5);
	}
	40%{
		-webkit-transform: translateY(2%) scaleX(0.5);
	}
	50%{
		-webkit-transform: translateY(0%) scaleX(1.1);
	}
	60%{
		-webkit-transform: translateY(0%) scaleX(0.9);
	}
	70% {
		-webkit-transform: translateY(0%) scaleX(1.05);
	}
	80%{
		-webkit-transform: translateY(0%) scaleX(0.95);
	}
	90% {
		-webkit-transform: translateY(0%) scaleX(1.02);
	}
	100%{
		-webkit-transform: translateY(0%) scaleX(1);
	}
}

/*
==============================================
expandUp
==============================================
*/

/*跳進來*/
.expandUp{
	animation-name: expandUp;
	-webkit-animation-name: expandUp;
	animation-duration: 0.7s;
	-webkit-animation-duration: 0.7s;
	animation-timing-function: ease;
	-webkit-animation-timing-function: ease;
	visibility: visible !important;
}

@keyframes expandUp {
	0% {
		transform: translateY(100%) scale(0.6) scaleY(0.5);
	}
	60%{
		transform: translateY(-7%) scaleY(1.12);
	}
	75%{
		transform: translateY(3%);
	}
	100% {
		transform: translateY(0%) scale(1) scaleY(1);
	}
}

@-webkit-keyframes expandUp {
	0% {
		-webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);
	}
	60%{
		-webkit-transform: translateY(-7%) scaleY(1.12);
	}
	75%{
		-webkit-transform: translateY(3%);
	}
	100% {
		-webkit-transform: translateY(0%) scale(1) scaleY(1);
	}
}

/*
==============================================
fadeIn
==============================================
*/
/*從正中間縮小＞放大*/
.fadeIn{
	animation-name: fadeIn;
	-webkit-animation-name: fadeIn;
	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;
	animation-timing-function: ease-in-out;
	-webkit-animation-timing-function: ease-in-out;
  visibility: visible !important;
}

@keyframes fadeIn {
	0% {
		transform: scale(0);
		opacity: 0.0;
	}
	60% {
		transform: scale(1.1);
	}
	80% {
		transform: scale(0.9);
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@-webkit-keyframes fadeIn {
	0% {
		-webkit-transform: scale(0);
		opacity: 0.0;
	}
	60% {
		-webkit-transform: scale(1.1);
	}
	80% {
		-webkit-transform: scale(0.9);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(1);
		opacity: 1;
	}
}

/*
==============================================
expandOpen
==============================================
*/

/*從正中間放大＞縮小*/
.expandOpen{
	animation-name: expandOpen;
	-webkit-animation-name: expandOpen;
	animation-duration: 1.2s;
	-webkit-animation-duration: 1.2s;
	animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;
	visibility: visible !important;
}

@keyframes expandOpen {
	0% {
		transform: scale(1.8);
	}
	50% {
		transform: scale(0.95);
	}
	80% {
		transform: scale(1.05);
	}
	90% {
		transform: scale(0.98);
	}
	100% {
		transform: scale(1);
	}
}

@-webkit-keyframes expandOpen {
	0% {
		-webkit-transform: scale(1.8);
	}
	50% {
		-webkit-transform: scale(0.95);
	}
	80% {
		-webkit-transform: scale(1.05);
	}
	90% {
		-webkit-transform: scale(0.98);
	}
	100% {
		-webkit-transform: scale(1);
	}
}

/*
==============================================
bigEntrance
==============================================
*/

/*從右上角縮小＞放大*/
.bigEntrance{
	animation-name: bigEntrance;
	-webkit-animation-name: bigEntrance;
	animation-duration: 1.6s;
	-webkit-animation-duration: 1.6s;
	animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;
	visibility: visible !important;
}

@keyframes bigEntrance {
	0% {
		transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
		opacity: 0.2;
	}
	30% {
		transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
		opacity: 1;
	}
	45% {
		transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
	60% {
		transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
	75% {
		transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
	90% {
		transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
	100% {
		transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
}

@-webkit-keyframes bigEntrance {
	0% {
		-webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
		opacity: 0.2;
	}
	30% {
		-webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
		opacity: 1;
	}
	45% {
		-webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
	60% {
		-webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
	75% {
		-webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
	90% {
		-webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
}

/*
==============================================
hatch
==============================================
*/
/*展開歪歪斜斜左右左右*/
.hatch{
	animation-name: hatch;
	-webkit-animation-name: hatch;
	animation-duration: 2s;
	-webkit-animation-duration: 2s;
	animation-timing-function: ease-in-out;
	-webkit-animation-timing-function: ease-in-out;
	transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;
	visibility: visible !important;
}

@keyframes hatch {
	0% {
		transform: rotate(0deg) scaleY(0.6);
	}
	20% {
		transform: rotate(-2deg) scaleY(1.05);
	}
	35% {
		transform: rotate(2deg) scaleY(1);
	}
	50% {
		transform: rotate(-2deg);
	}
	65% {
		transform: rotate(1deg);
	}
	80% {
		transform: rotate(-1deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

@-webkit-keyframes hatch {
	0% {
		-webkit-transform: rotate(0deg) scaleY(0.6);
	}
	20% {
		-webkit-transform: rotate(-2deg) scaleY(1.05);
	}
	35% {
		-webkit-transform: rotate(2deg) scaleY(1);
	}
	50% {
		-webkit-transform: rotate(-2deg);
	}
	65% {
		-webkit-transform: rotate(1deg);
	}
	80% {
		-webkit-transform: rotate(-1deg);
	}
	100% {
		-webkit-transform: rotate(0deg);
	}
}


/*
==============================================
bounce
==============================================
*/

/*跳起來~~落地*/
.bounce{
	animation-name: bounce;
	-webkit-animation-name: bounce;
	animation-duration: 1.6s;
	-webkit-animation-duration: 1.6s;
	animation-timing-function: ease;
	-webkit-animation-timing-function: ease;
	transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;
}

@keyframes bounce {
	0% {
		transform: translateY(0%) scaleY(0.6);
	}
	60%{
		transform: translateY(-100%) scaleY(1.1);
	}
	70%{
		transform: translateY(0%) scaleY(0.95) scaleX(1.05);
	}
	80%{
		transform: translateY(0%) scaleY(1.05) scaleX(1);
	}
	90%{
		transform: translateY(0%) scaleY(0.95) scaleX(1);
	}
	100%{
		transform: translateY(0%) scaleY(1) scaleX(1);
	}
}

@-webkit-keyframes bounce {
	0% {
		-webkit-transform: translateY(0%) scaleY(0.6);
	}
	60%{
		-webkit-transform: translateY(-100%) scaleY(1.1);
	}
	70%{
		-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);
	}
	80%{
		-webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);
	}
	90%{
		-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);
	}
	100%{
		-webkit-transform: translateY(0%) scaleY(1) scaleX(1);
	}
}


/*
==============================================
pulse
==============================================
*/

/*重複動作__放大縮小(固定速度)*/
/*.pulse{
	animation-name: pulse;
	-webkit-animation-name: pulse;

	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}*/
/*@keyframes pulse {
	0% {
		transform: scale(0.9);
		opacity: 0.7;
	}
	50% {
		transform: scale(1);
		opacity: 1;
	}
	100% {
		transform: scale(0.9);
		opacity: 0.7;
	}
}
@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scale(0.95);
		opacity: 0.7;
	}
	50% {
		-webkit-transform: scale(1);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(0.95);
		opacity: 0.7;
	}
}*/

/*重複動作__放大縮小(動動停動動停)*/
/*.pulse{
	animation-name: pulse;
	-webkit-animation-name: pulse;

	animation-duration: 1.2s;
	-webkit-animation-duration: 1.2s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}
@keyframes pulse {
	0% {
		transform: scale(0.95);
	}
	20% {
		transform: scale(1);
	}
	40% {
		transform: scale(0.95);
	}
	60% {
		transform: scale(1);
	}
	80% {
		transform: scale(1);
	}
	100% {
		transform: scale(0.95);
	}
}
@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scale(0.95);
	}
	20% {
		-webkit-transform: scale(1);
	}
	40% {
		-webkit-transform: scale(0.95);
	}
	60% {
		-webkit-transform: scale(1);
	}
	80% {
		-webkit-transform: scale(1);
	}
	100% {
		-webkit-transform: scale(0.95);
	}
}*/

/* 持續放大縮小 */
.pulse {
    animation-name:pulse;
    animation-duration:2s;
    animation-iteration-count:3;
}

/*
==============================================
floating
==============================================
*/
/*上下飄動*/
.floating{
	animation-name: floating;
	-webkit-animation-name: floating;
	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes floating {
	0% {
		transform: translateY(0%);
	}
	50% {
		transform: translateY(8%);
	}
	100% {
		transform: translateY(0%);
	}
}

@-webkit-keyframes floating {
	0% {
		-webkit-transform: translateY(0%);
	}
	50% {
		-webkit-transform: translateY(8%);
	}
	100% {
		-webkit-transform: translateY(0%);
	}
}

/*
==============================================
tossing
==============================================
*/
/*重複動作__蹺蹺板*/
/*.tossing{
	animation-name: tossing;
	-webkit-animation-name: tossing;

	animation-duration: 2.5s;
	-webkit-animation-duration: 2.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes tossing {
	0% {
		transform: rotate(-4deg);
	}
	50% {
		transform: rotate(4deg);
	}
	100% {
		transform: rotate(-4deg);
	}
}

@-webkit-keyframes tossing {
	0% {
		-webkit-transform: rotate(-4deg);
	}
	50% {
		-webkit-transform: rotate(4deg);
	}
	100% {
		-webkit-transform: rotate(-4deg);
	}
}*/

/*
==============================================
pullUp
==============================================
*/

/*向上展開*/
.pullUp{
	animation-name: pullUp;
	-webkit-animation-name: pullUp;
	animation-duration: 1.1s;
	-webkit-animation-duration: 1.1s;
	animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;
	transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;
}

@keyframes pullUp {
	0% {
		transform: scaleY(0.1);
	}
	40% {
		transform: scaleY(1.02);
	}
	60% {
		transform: scaleY(0.98);
	}
	80% {
		transform: scaleY(1.01);
	}
	100% {
		transform: scaleY(0.98);
	}
	80% {
		transform: scaleY(1.01);
	}
	100% {
		transform: scaleY(1);
	}
}

@-webkit-keyframes pullUp {
	0% {
		-webkit-transform: scaleY(0.1);
	}
	40% {
		-webkit-transform: scaleY(1.02);
	}
	60% {
		-webkit-transform: scaleY(0.98);
	}
	80% {
		-webkit-transform: scaleY(1.01);
	}
	100% {
		-webkit-transform: scaleY(0.98);
	}
	80% {
		-webkit-transform: scaleY(1.01);
	}
	100% {
		-webkit-transform: scaleY(1);
	}
}

/*
==============================================
pullDown
==============================================
*/
/*向下展開*/
.pullDown{
	animation-name: pullDown;
	-webkit-animation-name: pullDown;
	animation-duration: 1.1s;
	-webkit-animation-duration: 1.1s;
	animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;
	transform-origin: 50% 0%;
	-ms-transform-origin: 50% 0%;
	-webkit-transform-origin: 50% 0%;
}

@keyframes pullDown {
	0% {
		transform: scaleY(0.1);
	}
	40% {
		transform: scaleY(1.02);
	}
	60% {
		transform: scaleY(0.98);
	}
	80% {
		transform: scaleY(1.01);
	}
	100% {
		transform: scaleY(0.98);
	}
	80% {
		transform: scaleY(1.01);
	}
	100% {
		transform: scaleY(1);
	}
}

@-webkit-keyframes pullDown {
	0% {
		-webkit-transform: scaleY(0.1);
	}
	40% {
		-webkit-transform: scaleY(1.02);
	}
	60% {
		-webkit-transform: scaleY(0.98);
	}
	80% {
		-webkit-transform: scaleY(1.01);
	}
	100% {
		-webkit-transform: scaleY(0.98);
	}
	80% {
		-webkit-transform: scaleY(1.01);
	}
	100% {
		-webkit-transform: scaleY(1);
	}
}

/*
==============================================
stretchLeft
==============================================
*/

/*重複動作__向左展開*/
.stretchLeft{
	animation-name: stretchLeft;
	-webkit-animation-name: stretchLeft;
	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;
	animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;
	transform-origin: 100% 0%;
	-ms-transform-origin: 100% 0%;
	-webkit-transform-origin: 100% 0%;
}

@keyframes stretchLeft {
	0% {
		transform: scaleX(0.3);
	}
	40% {
		transform: scaleX(1.02);
	}
	60% {
		transform: scaleX(0.98);
	}
	80% {
		transform: scaleX(1.01);
	}
	100% {
		transform: scaleX(0.98);
	}
	80% {
		transform: scaleX(1.01);
	}
	100% {
		transform: scaleX(1);
	}
}

@-webkit-keyframes stretchLeft {
	0% {
		-webkit-transform: scaleX(0.3);
	}
	40% {
		-webkit-transform: scaleX(1.02);
	}
	60% {
		-webkit-transform: scaleX(0.98);
	}
	80% {
		-webkit-transform: scaleX(1.01);
	}
	100% {
		-webkit-transform: scaleX(0.98);
	}
	80% {
		-webkit-transform: scaleX(1.01);
	}
	100% {
		-webkit-transform: scaleX(1);
	}
}

/*
==============================================
stretchRight
==============================================
*/
/*向右展開*/
.stretchRight{
	animation-name: stretchRight;
	-webkit-animation-name: stretchRight;
	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;
	animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;
	transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-webkit-transform-origin: 0% 0%;
}

@keyframes stretchRight {
	0% {
		transform: scaleX(0.3);
	}
	40% {
		transform: scaleX(1.02);
	}
	60% {
		transform: scaleX(0.98);
	}
	80% {
		transform: scaleX(1.01);
	}
	100% {
		transform: scaleX(0.98);
	}
	80% {
		transform: scaleX(1.01);
	}
	100% {
		transform: scaleX(1);
	}
}

@-webkit-keyframes stretchRight {
	0% {
		-webkit-transform: scaleX(0.3);
	}
	40% {
		-webkit-transform: scaleX(1.02);
	}
	60% {
		-webkit-transform: scaleX(0.98);
	}
	80% {
		-webkit-transform: scaleX(1.01);
	}
	100% {
		-webkit-transform: scaleX(0.98);
	}
	80% {
		-webkit-transform: scaleX(1.01);
	}
	100% {
		-webkit-transform: scaleX(1);
	}
}

/*滑鼠滑入時放大*/
/*.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.07);
  transform: scale(1.07);
}*/

/* 滑入時縮小 */
.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    transform:translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    backface-visibility:hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration:0.3s;
    transition-property:transform;
  }
  .hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
    transform:scale(0.98);
  }

/*滑鼠滑入時縮小*/
.hvr-shrink {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

/*持續動態_微轉動*/
.tossing{
	animation-name: tossing;
	-webkit-animation-name: tossing;
	animation-duration: 5.5s;
	-webkit-animation-duration: 5.5s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes tossing {
	0% { transform: rotate(360deg); }
	100% { transform: rotate(0deg); }
}

@-webkit-keyframes tossing {
	0% { transform: rotate(360deg); }
	100% { transform: rotate(0deg); }
}


/*進場動畫_放大*/
.bigEntrance{
	animation-name: bigEntrance;
	-webkit-animation-name: bigEntrance;
	animation-duration: 1.6s;
	-webkit-animation-duration: 1.6s;
	animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;
	visibility: visible !important;
}

@keyframes bigEntrance {
	0% {
		transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
		opacity: 0.2;
	}
	30% {
		transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
		opacity: 1;
	}
	45% {
		transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
	60% {
		transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
	75% {
		transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
	90% {
		transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
	100% {
		transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
}

@-webkit-keyframes bigEntrance {
	0% {
		-webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
		opacity: 0.2;
	}
	30% {
		-webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
		opacity: 1;
	}
	45% {
		-webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
	60% {
		-webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
	75% {
		-webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
	90% {
		-webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
}


/*持續動態_跳跳停*/
.bounce2 {
  animation: bounce2 2s ease infinite;
}
@keyframes bounce2 {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}


/*持續動態_放大左右搖*/
.hithere {
  animation: hithere 1s ease infinite;
}
@keyframes hithere {
  30% { transform: scale(1.2); }
  40%, 60% { transform: rotate(-20deg) scale(1.2); }
  50% { transform: rotate(20deg) scale(1.2); }
  70% { transform: rotate(0deg) scale(1.2); }
  100% { transform: scale(1); }
}

/*淡出往上*/
.toTop {
  -moz-animation-name: toTop;
  -webkit-animation-name: toTop;
  animation-name: toTop;
  -moz-animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -moz-animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-moz-keyframes toTop {
  0% {
    -moz-transform: translateY(10px);
    transform: translateY(10px);
    opacity: 0;
  }
  35% {
    -moz-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes toTop {
  0% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    opacity: 0;
  }
  35% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes toTop {
  0% {
    -moz-transform: translateY(10px);
    -ms-transform: translateY(10px);
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    opacity: 0;
  }
  35% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

/*淡出往下*/
.tobottom {
  -moz-animation-name: tobottom;
  -webkit-animation-name: tobottom;
  animation-name: tobottom;
  -moz-animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -moz-animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-moz-keyframes tobottom {
  0% {
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
    opacity: 0;
  }
  35% {
    -moz-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes tobottom {
  0% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
    opacity: 0;
  }
  35% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes tobottom {
  0% {
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
    opacity: 0;
  }
  35% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
	opacity: 1;
  }
}

/*淡出往右*/
.toright {
  -moz-animation-name: toright;
  -webkit-animation-name: toright;
  animation-name: toright;
  -moz-animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -moz-animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-moz-keyframes toright {
  0% {
    -moz-transform: translateX(-20px);
    transform: translateX(-20px);
    opacity: 0;
  }
  35% {
    -moz-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    -moz-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@-webkit-keyframes toright {
  0% {
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
    opacity: 0;
  }
  35% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes toright {
  0% {
    -moz-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
    opacity: 0;
  }
  35% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

/*淡出往左*/
.toleft {
  -moz-animation-name: toleft;
  -webkit-animation-name: toleft;
  animation-name: toleft;
  -moz-animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -moz-animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-moz-keyframes toleft {
  0% {
    -moz-transform: translateX(20px);
    transform: translateX(20px);
    opacity: 0;
  }
  35% {
    -moz-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    -moz-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@-webkit-keyframes toleft {
  0% {
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
    opacity: 0;
  }
  35% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes toleft {
  0% {
    -moz-transform: translateX(20px);
    -ms-transform: translateX(20px);
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
    opacity: 0;
  }
  35% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

/* 上下飄動 */
.sloganAnimation {
    animation: toTopB 0.5s 0.5s linear, float 2s 1.5s linear infinite;
}
.ssAnimation {
    animation: toTop 0.5s .8s linear, pulse 1.5s 2s linear infinite;
}

@keyframes delay{
    from{
        opacity: 0;
    }
    to{
        opacity: 0;
    }
}
@keyframes toTopB{
    0%{
        opacity: 0;
        transform: translateY(30px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px);
    }
}
@keyframes pulse{
    5% {
        transform: scale(1);
    }
    27% {
        transform: scale(0.9);
    }
    50% {
        transform: scale(1);
    }
    72% {
        transform: scale(0.9);
    }
    95% {
        transform: scale(1);
    }
}

@keyframes float {
	10% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(6%);
	}
	90% {
		transform: translateY(0px);
	}
}

@keyframes delay{
    from{
        opacity: 0;
    }
    to{
        opacity: 0;
    }
}
/*@keyframes toLeft{
    0%{
        opacity: 0;
        transform: translateX(50px);
    }
    100%{
        opacity: 1;
        transform: translateX(0px);
    }
}
@keyframes toright{
    0%{
        opacity: 0;
        transform: translateX(-50px);
    }
    100%{
        opacity: 1;
        transform: translateX(0px);
    }
}*/
@keyframes pulse{
    0% {
        transform: scale(1) translateY(0%);
    }
    50% {
        transform: scale(0.9) translateY(3%);
    }
    100% {
        transform: scale(1) translateY(0%);
    }
}

@keyframes float {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-20px);
	}
	100% {
		transform: translateY(0px);
	}
}

@keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 0deg) translateY(0px);
  }

  40% {
    transform: rotate3d(0, 0, 1, 3deg) translateY(-10px);
  }

  60% {
    transform: rotate3d(0, 0, 1, 5deg) translateY(5px);

  }

  80% {
    transform: rotate3d(0, 0, 1, -2deg) translateY(-15px);
  }

  to {
    transform: rotate3d(0, 0, 1, 0deg) translateY(0);
  }
}

.swing {
  transform-origin: bottom center;
  animation-name: swing;
  animation-iteration-count:infinite;
  animation-duration:5s;
}

@keyframes clickMe{
    0%{
        transform: translateX(0) translateY(0);
    }
    50%{
        transform: translateX(10px) translateY(10px);
    }
    100%{
        transform: translateX(0) translateY(0);
    }
}