CSS로 처음부터 끝까지 같은 속도로 애니메이션 설정하기

CSS에서 애니메이션이 시작부터 끝까지 동일한 속도로 진행되도록 만들려면 animation-timing-function 속성에 linear 값을 지정하면 됩니다.

기본값인 ease는 애니메이션이 느리게 시작했다가 빨라지고 다시 느려지는 가속·감속 효과를 갖지만, linear를 사용하면 이러한 변화 없이 처음부터 마지막까지 일정한 속도를 유지합니다. 로딩 스피너나 무한 반복 배경 움직임처럼 균일한 리듬이 필요한 애니메이션에 특히 유용합니다.

예제 코드

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 150px;
            height: 200px;
            position: relative;
            background-color: yellow;
            animation-name: myanim;
            animation-duration: 2s;
            animation-direction: alternate-reverse;
            animation-iteration-count: 3;
         }
         @keyframes myanim {
            from {left: 100px;}
            to {left: 200px;}
         }
         #demo {animation-timing-function: linear;}
      </style>
   </head>
   <body>
      <div id = "demo">linear effect</div>
   </body>
</html>

코드 설명

위 예제에서 노란색 div 요소는 @keyframes로 정의된 myanim 애니메이션에 따라 왼쪽 위치가 100px에서 200px로 이동합니다. 애니메이션 지속 시간은 2초이며, animation-direction: alternate-reverse 덕분에 방향을 번갈아 가며 총 3회 반복됩니다.

핵심은 #demo {animation-timing-function: linear;} 부분입니다. 이 선언으로 인해 요소가 이동하는 동안 속도의 변화 없이 항상 같은 속도로 움직이게 됩니다.

참고: 다른 timing-function 값들

animation-timing-function에는 linear 외에도 다양한 값을 사용할 수 있습니다.

ease — 기본값으로, 느리게 시작해 빨라졌다가 느리게 끝납니다.
ease-in — 느리게 시작하여 점점 빨라집니다.
ease-out — 빠르게 시작하여 점점 느려집니다.
ease-in-out — 시작과 끝이 모두 느립니다.
cubic-bezier(n, n, n, n) — 베지어 곡선을 직접 정의해 원하는 속도 곡선을 만들 수 있습니다.

일정한 속도가 필요한 경우가 아니라면 요소의 성격에 맞게 위 값들을 활용해 더 자연스러운 애니메이션을 연출할 수 있습니다.