/* @keyframes duration | timing-function | delay |
   iteration-count | direction | fill-mode | play-state | name */

/* fadeInUp */
@-webkit-keyframes fadeInUp {
    0% {
		-webkit-transform: translateY(40px);
        transform: translateY(40px);
        opacity: 0;
    }
    100% {
		-webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fadeInUp {
    0% {
		-webkit-transform: translateY(40px);
        transform: translateY(40px);
        opacity: 0;
    }
    100% {
		-webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
.gjy-fadeInUp.off {
	-webkit-transform: translateY(40px);
    transform: translateY(40px);
    opacity: 0;
}
.gjy-fadeInUp.on {
	-webkit-transform: translateY(40px);
    transform: translateY(40px);
    opacity: 0;
	-webkit-animation: 1.5s ease 0.2s forwards fadeInUp;
    animation: 1.5s ease 0.2s forwards fadeInUp;
}

/* slideInRight */
@-webkit-keyframes slideInRight {
	0% {
		-webkit-transform: translateX(-60px);
		transform: translateX(-60px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes slideInRight {
	0% {
		-webkit-transform: translateX(-60px);
		transform: translateX(-60px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
}
.gjy-slideInRight.off {
	-webkit-transform: translateX(-60px);
	transform: translateX(-60px);
	opacity: 0;
}
.gjy-slideInRight.on {
	-webkit-transform: translateX(-60px);
	transform: translateX(-60px);
	opacity: 0;
	-webkit-animation: 1.3s ease 0.2s forwards slideInRight;
	animation: 1.3s ease 0.2s forwards slideInRight;
}

/* slideInLeft */
@keyframes slideInLeft {
	0% {
		transform: translateX(-60px);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}
.gjy-slideInLeft.off {
	transform: translateX(-60px);
	opacity: 0;
}
.gjy-slideInLeft.on {
	transform: translateX(-60px);
	opacity: 0;
	animation: 1.3s ease 0.2s forwards slideInLeft;
}

/* fadeIn */
@keyframes fadeIn {
    0% {opacity: 0;}

    10% {opacity: 0;}

    100% {opacity: 1;}
}
.gjy-fadeIn.off {
    opacity: 0;
}
.gjy-fadeIn.on {
    opacity: 0;
    animation: 1.7s ease 0.2s forwards fadeIn;
}

/* rotate */
@keyframes rotate {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: rotate(360deg);
    }
}
.gjy-rotate.off {
    opacity: 0;
}
.gjy-rotate.on {
    opacity: 0;
    animation-name: rotate;
    animation-duration: 1.5s;
}

/* horizontal-expand */
@keyframes expandH {
    0% {
        transform: scaleX(0);
        opacity: 0;
    }
    100% {
        transform: scaleX(1);
        opacity: 1;
    }
}
.gjy-expandH.off {
    transform: scaleX(0);
    opacity: 0;
}
.gjy-expandH.on {
    transform: scaleX(0);
    opacity: 0;
    animation: 1.5s ease 0.2s forwards expandH;
}

/* expand from top to bottom */
@keyframes expandTTB {
    0% {
        transform: scaleY(0);
        transform-origin: 50% 0%;
    }

    100% {
        transform: scaleY(1);
        transform-origin: 50% 0%;
    }
}
.gjy-expandTTB.off {
    transform: scaleY(0);
}
.gjy-expandTTB.on {
    transform: scaleY(0);
    animation: 0.7s ease 0.2s forwards expandTTB;
}

/* pop up */
@keyframes popUp {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {transform: scale(1.3);}
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
.gjy-popUp.off {
    transform: scale(0.1);
    opacity: 0;
}
.gjy-popUp.on {
    transform: scale(0.1);
    opacity: 0;
    animation: 0.7s ease 0.2s forwards popUp;
}