animation-timing-function: ease, linear, ease-in, ease-out, ease-in-out 비교하기

비교예시

아래의 코드에서는 빨간색 사각형들이 오른쪽으로 200px 이동하는 애니메이션을 사용하여 ease, linear, ease-in, ease-out, ease-in-out 다섯 가지 animation-timing-function 값으로 비교하고 있습니다.

 

html

    <h3>ease</h3>
    <div class="box ease"></div>
    <h3>linear</h3>
    <div class="box linear"></div>
    <h3>ease-in</h3>
    <div class="box ease-in"></div>
    <h3>ease-out</h3>
    <div class="box ease-out"></div>
    <h3>ease-in-out</h3>
    <div class="box ease-in-out"></div>

css

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

        .ease {
            animation-name: move-ease;
            animation-timing-function: ease;
        }

        .linear {
            animation-name: move-linear;
            animation-timing-function: linear;
        }

        .ease-in {
            animation-name: move-ease-in;
            animation-timing-function: ease-in;
        }

        .ease-out {
            animation-name: move-ease-out;
            animation-timing-function: ease-out;
        }

        .ease-in-out {
            animation-name: move-ease-in-out;
            animation-timing-function: ease-in-out;
        }

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

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

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

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

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

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

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

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

        @keyframes move-ease-in-out {
            0% {
                transform: translateX(0);
            }

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

 

 

결과

 

ease

linear

ease-in

ease-out

ease-in-out

 

1. ease: 기본값인 ease 타이밍 함수를 사용하여 처음에는 느리게 시작하고, 점점 빨라지다가 끝에 가까워질수록 다시 느려지는 효과를 보여줍니다.

2. linear: linear 타이밍 함수를 사용하여 애니메이션을 일정한 속도로 일정하게 진행합니다.

3. ease-in: ease-in 타이밍 함수를 사용하여 처음에는 느리게 시작하고, 점점 빨라지는 효과를 보여줍니다.

4. ease-out: ease-out 타이밍 함수를 사용하여 처음에는 빠르게 시작하고, 점점 느려지는 효과를 보여줍니다.

5. ease-in-out: ease-in-out 타이밍 함수를 사용하여 처음에는 느리게 시작하고, 가속하다가 끝에 가까워질수록 다시 느려지는 효과를 보여줍니다.