animation-fill-mode: none, forwards, backwards, both 비교하기

비교하기

animation-fill-mode 속성을 사용하여 none, forwards, backwards, both 네 가지 값으로 애니메이션의 시작 전과 종료 후 요소의 스타일을 설정하는 예시를 보여드리겠습니다.

 

html

    <h3>none</h3>
    <div class="box none"></div>
    <h3>forwards</h3>
    <div class="box forwards"></div>
    <h3>backwards</h3>
    <div class="box backwards"></div>
    <h3>both</h3>
    <div class="box both"></div>

css

        .box {
            width: 100px;
            height: 100px;
            margin: 20px;
            background-color: green;
            animation-duration: 2s;
            animation-iteration-count: 1;
        }

        .none {
            animation-name: move-none;
            animation-fill-mode: none;
        }

        .forwards {
            animation-name: move-forwards;
            animation-fill-mode: forwards;
        }

        .backwards {
            animation-name: move-backwards;
            animation-fill-mode: backwards;
        }

        .both {
            animation-name: move-both;
            animation-fill-mode: both;
        }

        @keyframes move-none {
            0% {
                transform: translateX(0) scale(1);
                background-color: green;
            }

            100% {
                transform: translateX(200px) scale(1.5);
                background-color: blue;
            }
        }

        @keyframes move-forwards {
            0% {
                transform: translateX(0) scale(1);
                background-color: green;
            }

            100% {
                transform: translateX(200px) scale(1.5);
                background-color: blue;
            }
        }

        @keyframes move-backwards {
            0% {
                transform: translateX(0) scale(1);
                background-color: green;
            }

            100% {
                transform: translateX(200px) scale(1.5);
                background-color: blue;
            }
        }

        @keyframes move-both {
            0% {
                transform: translateX(0) scale(1);
                background-color: green;
            }

            100% {
                transform: translateX(200px) scale(1.5);
                background-color: blue;
            }
        }

 

결과

 

none

forwards

backwards

both

 

🌈새로고침을 누르면서 확인해보세요!

 

위의 코드에서는 초록색 사각형들이 오른쪽으로 200px 이동하면서 크기가 1.5배 커지고, 색상이 녹색에서 파란색으로 변화하는 애니메이션을 사용하여 none, forwards, backwards, both 네 가지 animation-fill-mode 값으로 비교하고 있습니다.

 

1. none: none 값은 애니메이션의 시작 전과 종료 후의 스타일을 변경하지 않습니다. 즉, 애니메이션이 실행되지 않는 동안 요소는 @keyframes에 정의된 스타일을 적용하지 않습니다. 애니메이션이 끝나면 요소는 @keyframes에 정의된 최종 스타일을 적용하지 않습니다.

2. forwards: forwards 값은 애니메이션의 실행 후의 스타일을 유지합니다. 즉, 애니메이션이 끝나면 요소는 @keyframes에 정의된 최종 스타일을 유지합니다.

3. backwards: backwards 값은 애니메이션의 실행 전의 스타일을 적용합니다. 즉, 애니메이션이 시작되기 전에 요소는 @keyframes의 첫 번째 키프레임 스타일을 적용합니다.

4. both: both 값은 forwards와 backwards를 결합한 효과를 가집니다. 즉, 애니메이션이 끝나면 요소는 @keyframes에 정의된 최종 스타일을 유지하며, 애니메이션이 시작되기 전에 요소의 초기 스타일을 적용합니다.