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

CSS는 간단하지만 안하면 까먹는 것 , CSS 사라짐 효과 fade-in 효과 ... 어쩌고 저쩌고 할게 참 많고

검색하면 따로따로 나와서 헷갈리는데 그냥 한번 할 때 제대로 알아두자.

 

간단한 서서히 나타나고 사라지는 애니메이션을 구현해보면서 (페이드-인 페이드-아웃) 진행 할 거다.

keyframes 라는것을 미리 정의해주고 (애니메이션 정의) 그것을 불러오는 방식이다.

 

그니까 애초에 fadein ,fadeout 이런건 내장 기능이 아니라 정의해서 만들어야 하는거다.

애니메이션 속성

CSS의 @keyframes를 사용하여 애니메이션을 정의한다.

애니메이션은 몇 가지 속성을 가지고 있다.

    animation-name: 애니메이션의 이름을 지정
    animation-duration: 애니메이션의 지속 시간을 지정.
    animation-timing-function: 애니메이션의 타이밍 함수를 지정하여 속도를 조절
    animation-delay: 애니메이션의 시작을 지연
    animation-iteration-count: 애니메이션의 반복 횟수를 지정
    animation-direction: 애니메이션의 반복 방향을 지정
    animation-fill-mode: 애니메이션의 시작 및 끝 상태를 제어

Fade In (서서히 나타나기)

.fade-in-box {
    display: inline-block;
    background: yellow;
    padding: 10px;
    animation: fadein 3s;
} 

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

Fade Out (서서히 사라지기)

.fade-out-box { 
    display: inline-block;
    background: red;
    padding: 10px;
    animation: fadeout 3s;
    animation-fill-mode: forwards;
} 

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

 

추가로 animation-fill-mode: forwards; 를 사용=> 애니메이션이 종료된 후에도 최종 상태를 유지하도록 설정하였다.