CSS animation (애니메이션) 마지막 상태 유지하는 방법

2020. 8. 17. 00:04

CSS 애니메이션은 기본값이 반복 입니다. 무한 반복이죠. 하지만 애니메이션을 무한 루트가 아닌 딱 1회만 진행되도록 만들고 싶습니다. 혹시 스크립트를 써야 하는게 아닐까 속으로 내심 걱정이었는데 역시 CSS에도 이런 기능이 있었습니다. 참고로 마우스를 올렸을 때 애니메이션은 기본적으로 1회만 재생됩니다. 그밖의 스타일에 애니메이션을 마지막 상태로 만들고 싶을 때 이 방법을 사용하면 됩니다.

animatiln-fill-mode

이 방법으로 에니메이션의 동작을 제어할 수 있습니다. 브라켓에서 살펴보니 다음의 네가지에 대한 옵션이 있었습니다.

backwards : 애니메이션 처음 상태의 CSS 스타일을 유지함

forwards : 애니메이션 마지막 상태의 CSS 스타일을 유지함 (바로 원하던 것!)

both : backwards + forwards 둘 다

none : 무한 재생 (기본값)

즉 제가 원하는건 바로 forwards라고 할 수 있겠습니다.

CSS animation 속성

좀 더 자세한 animation 속성 입니다. 이런 디테일한 옵션들을 사용할 수 있습니다.

div {
    animation-name: rgy; /* 애니메이션 이름 */
    animation-duration: 5s; /* 재생 시간 (실행속도) */
    animation-timing-function: ease-in; /* 속도곡선타입 */
    animation-delay: 1s; /* 딜레이 시간 */
    animation-iteration-count: infinite; /* 반복 횟수 */
    animation-direction: alternate; /* 진행 방향 */
    animation-fill-mode: forwards; /* 종료 후 위치 */
    animation-play-state: paused; /* 실행 or 정지 */
}

각 부분의 설명은 주석으로 코멘트 처리를 했으니 참고하시기 바랍니다. 이게 풀버전이고 한 줄로 요약도 가능합니다.

div {
    animation: rgy 5s ease-in 1s infinite alternate forwards paused;
}

이렇게 사용할수도 있습니다. 즉 이런 식으로 마크업 하면 됩니다.

name > duration > timing-function > delay > count > direction > fill-mode > play-state

에니메이션 이름 > 재생 시간(실행 속도) > 속도 곡선 타입 > 딜레이 시간 > 반복 횟수 > 진행 방향 > 종료 후 위치 > 실행or정지

굳이 디테일하게 표현하지 않아도 원하는대로 작동 가능 합니다. 이렇게 풀버전으로 마크업 해야 하는게 원래 정석이지만 기본적으로 마크업하지 않은 속성에 대해서는 기본값으로 동작하게 됩니다. 그리고 부족한 부분은 따로 매소드를 마크업 해주면 됩니다. 이번에 친효애드온 중 본문 중간 수동 링크 모듈 마크6에서 애니메이션 1회 재생으로 적용되어 있는데 이렇게 코딩을 구성했습니다.

.rgyLink6 > p > a {
    color: #555;
    animation: rgy01 1s forwards;
}

@keyframes rgy01 {
    0% {
        transform: none;
    }
    
    10% {
        transform: translateY(-7px);
    }
    
    20% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-5px);
    }
    
    40% {
        transform: translateY(0px);
    }
    
    50% {
        transform: translateY(-2px);
    }
    
    60% {
        transform: translateY(0px);
    }
    
    100% {
        transform: none;
    }
}

보시면 a 태그에 rgy01 이라고 하는 애니메이션이 1초동안 재생되고 이후에는 마지막 프레임 위치에서 고정되도록 설정된 상태라는걸 확인할 수 있습니다. 그러면 forwards 대신 paused를 넣으면 어떻게 될까요? 혹시 마지막까지 재생 후 그냥 정지가 되는걸까요? 테스트 결과 아예 애니메이션이 재생이 안 되는걸 확인했습니다. 즉 animatanimation-play-state 는 애니메이션의 재생 혹은 중지에 대한 전체 제어를 담당합니다.

아니면 이렇게 구성해도 됩니다.

.rgyLink6 > p > a {
    color: #555;
    animation: rgy01 1s;
    animation-iteration-count: 1;
}

forwards를 빼버리고 그냥 애니메이션 반복 횟수를 infinite가 아닌 1로 마크업 했습니다. 즉 애니메이션 1회 재생인 샘 입니다. 이렇게 해도 결과 화면은 동일합니다.

.rgyLink6 > p > a {
    animation: rgy01 1s 1;
}

아니면 이렇게 간단하게 한 줄로 요약할 수도 있습니다. 다만 이 방법은 처음 애니메이션과 마지막 애니메이션이 동일할 때 1회 반복을 사용함으로서 동일한 결과 화면을 얻을 수 있는 방법입니다. 만약 애니메이션이 처음과 끝 결과가 다르다면 당연히 animatiln-fill-mode를 사용하여야 합니다. 끝.