/* 서서히 생기는 효과*/
@keyframes fadeIn {
    from {opacity : 0;}
    to {opacity : 1;}
}

/* 서서히 사라지는 효과*/
@keyframes fadeOut {
    from {opacity : 1;}
    to {opacity : 0;}
}

/* @-webkit-keyframes : 크롬에서 애니메이션 적용하기 */
@-webkit-keyframes fadeIn {
    from {opacity : 0;}
    to {opacity : 1;}
}
@-webkit-keyframes fadeOut {
    from {opacity : 1;}
    to {opacity : 0;}
}

/* 돔객체에 넣어주는것이 아닌 클래스 선택자로 css animation 속성값 지정해줘도 됨*/
/* 
.fadeIn {
  animation: fadeIn; <- 위에서 만들어둔 애니메이션 지정
  animation-duration: 0.5s;
}

.fadeOut {
  animation: fadeOut;
  animation-duration: 0.5s;
} 
*/