animation-direction: normal, reverse, alternate, alternate-reverse 비교하기

비교예시

animation-direction 속성을 사용하여 normal, reverse, alternate, alternate-reverse 네 가지 값으로 애니메이션의 재생 방향을 설정하는 예시를 보여드리겠습니다.

 

html

    <h3>normal</h3>
    <div class="box normal"></div>
    <h3>reverse</h3>
    <div class="box reverse"></div>
    <h3>alternate</h3>
    <div class="box alternate"></div>
    <h3>alternate-reverse</h3>
    <div class="box alternate-reverse"></div>

css

        .box {
            width: 100px;
            height: 100px;
            margin: 20px;
            background-color: blue;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-fill-mode: forwards;
        }

        .normal {
            animation-name: move-normal;
            animation-direction: normal;
        }

        .reverse {
            animation-name: move-reverse;
            animation-direction: reverse;
        }

        .alternate {
            animation-name: move-alternate;
            animation-direction: alternate;
        }

        .alternate-reverse {
            animation-name: move-alternate-reverse;
            animation-direction: alternate-reverse;
        }

        @keyframes move-normal {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(200px);
            }
        }

        @keyframes move-reverse {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(200px);
            }
        }

        @keyframes move-alternate {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(200px);
            }
        }

        @keyframes move-alternate-reverse {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(200px);
            }
        }

결과

normal

reverse

alternate

alternate-reverse

 

1. normal: normal 값은 기본값으로, 애니메이션을 정상적으로 재생합니다. 즉, 애니메이션은 시작 지점에서 끝 지점까지 정상적으로 진행되며, 이때 @keyframes의 선언 순서에 따라 애니메이션 키프레임이 재생됩니다.

2. reverse: reverse 값은 애니메이션을 역방향으로 재생합니다. 즉, 애니메이션은 끝 지점에서 시작 지점까지 역으로 진행되며, @keyframes의 선언 순서에 반대로 애니메이션 키프레임이 재생됩니다.

3. alternate: alternate 값은 애니메이션을 정상적으로 시작하고, 끝 지점에 도달하면 다시 역방향으로 반복해서 재생합니다. 즉, normal과 reverse를 번갈아가며 재생하는 형태입니다.

4. alternate-reverse: alternate-reverse 값은 alternate와 유사하지만, 시작 방향이 반대로 역방향으로 시작하고, 끝 지점에서 다시 정상 방향으로 반복해서 재생합니다.