CSS로 서서히 나타나고 사라지는 애니메이션 구현하기

CSS는 간단하지만 안하면 까먹는 것 , CSS 사라짐 효과 fade-in 효과 ... 어쩌고 저쩌고 할게 참 많고 검색하면 따로따로 나와서 헷갈리는데 그냥 한번 할 때 제대로 알아두자. 간단한 서서히 나타나고 사라지는 애니메이션을 구현해보면서 (페이드-인 페이드-아웃) 진행 할 거다. keyframes 라는것을 미리 정의해주고 (애니메이션 정의) 그것을 불러오는 방식이다. 그니까 애초에 fadein ,fadeout 이런건 내장 기능이 아니라 정의해서 만들어야 하는거다. 애니메이션 속성 CSS의 @keyframes를 사용하여 애니메이션을 정의한다. 애니메이션은 몇 가지 속성을 가지고 있다. animation-name: 애니메이션의 이름을 지정 animation-duration: 애니메이션의 지속 시간을 ..