@keyframes fadeIn {
    from { opacity:0; }
    to { opacity:1; }
}

@keyframes fadeOut {
    from { opacity:1; }
    to { opacity:0; }
}

/* 크롬은 webkit */
@-webkit-keyframes fadeIn {
    from { opacity:0; }
    to { opacity:1; }
}

@-webkit-keyframes fadeOut {
    from { opacity:1; }
    to { opacity:0; }
}

/* fadeIn이라는 클래스를 가지면 */
.fadeIn{
    animation:fadeIn;
    animation-duration: 1s;
}

.fadeOut{
    animation:fadeOut;
    animation-duration: 1s;
}