/* animation 정의 */

.active {
	-webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

/* fade - 천천히 선명해짐 */
@-webkit-keyframes ani_fadeIn {
    from { opacity:0;}
    to { opacity:1;}
}
@-moz-keyframes ani_fadeIn {
    from { opacity:0;}
    to { opacity:1;}
}
@-o-keyframes ani_fadeIn {
    from { opacity:0;}
    to { opacity:1;}
}
@keyframes ani_fadeIn {
    from { opacity:0; }
    to { opacity:1;}
}

/* fade - 천천히 흐려짐 */
@-webkit-keyframes ani_fadeOut {
    from { opacity:1;}
    to { opacity:0;}
}
@-moz-keyframes ani_fadeOut {
    from { opacity:1;}
    to { opacity:0;}
}
@-o-keyframes ani_fadeOut {
    from { opacity:1;}
    to { opacity:0;}
}
@keyframes ani_fadeOut {
    from { opacity:1;}
    to { opacity:0;}
}
	

/* scale - 작다가 커짐 */
@-webkit-keyframes ani_scaleUp {
    from { opacity:0;-webkit-transform: scale(0.5); }
    to { opacity:1;-webkit-transform: scale(1); }
}
@-moz-keyframes ani_scaleUp {
    from { opacity:0;-moz-transform: scale(0.5); }
    to { opacity:1;-moz-transform: scale(1); }
}
@-o-keyframes ani_scaleUp {
    from { opacity:0;-o-transform: scale(0.5); }
    to { opacity:1;-o-transform: scale(1); }
}
@keyframes ani_scaleUp {
    from { opacity:0;transform: scale(0.5); }
    to { opacity:1;transform: scale(1); }
}

/* scale - 크다가 작아짐 */
@-webkit-keyframes ani_scaleDown {
    from { opacity:0;-webkit-transform: scale(1.5); }
    to { opacity:1;-webkit-transform: scale(1); }
}
@-moz-keyframes ani_scaleDown {
    from { opacity:0;-moz-transform: scale(1.5); }
    to { opacity:1;-moz-transform: scale(1); }
}
@-o-keyframes ani_scaleDown {
    from { opacity:0;-o-transform: scale(1.5); }
    to { opacity:1;-o-transform: scale(1); }
}
@keyframes ani_scaleDown {
    from { opacity:0;transform: scale(1.5); }
    to { opacity:1;transform: scale(1); }
}

/* slide - 아래 > 위 */
@-webkit-keyframes ani_slideUp {
    from { opacity:0;-webkit-transform: translateY(50px); }
    to { opacity:1;-webkit-transform: translateY(0px); }
}
@-moz-keyframes ani_slideUp {
    from { opacity:0;-moz-transform: translateY(50px)); }
    to { opacity:1;-moz-transform: translateY(0px); }
}
@-o-keyframes ani_slideUp {
    from { opacity:0;-o-transform: translateY(50px); }
    to { opacity:1;-o-transform: translateY(0px); }
}
@keyframes ani_slideUp {
    from { opacity:0;transform: translateY(50px); }
    to { opacity:1;transform: translateY(0px); }
}

/* slide - 위 > 아래 */
@-webkit-keyframes ani_slideDown {
    from { opacity:0;-webkit-transform: translateY(-50px); }
    to { opacity:1;-webkit-transform: translateY(0px); }
}
@-moz-keyframes ani_slideDown {
    from { opacity:0;-moz-transform: translateY(-50px)); }
    to { opacity:1;-moz-transform: translateY(0px); }
}
@-o-keyframes ani_slideDown {
    from { opacity:0;-o-transform: translateY(-50px); }
    to { opacity:1;-o-transform: translateY(0px); }
}
@keyframes ani_slideDown {
    from { opacity:0;transform: translateY(-50px); }
    to { opacity:1;transform: translateY(0px); }
}