CSS animation-timing-function ease 값으로 느리게 시작해 빠르게 진행 후 천천히 끝나는 애니메이션 만들기

CSS animation-timing-function의 ease 값으로 부드러운 애니메이션 구현하기

CSS에서 animation-timing-function 속성에 ease 값을 사용하면, 애니메이션이 느리게 시작한 뒤 점점 빠르게 진행되고, 마지막에는 다시 천천히 끝나는 자연스러운 가속 곡선을 만들 수 있습니다. ease 값은 별도로 지정하지 않았을 때 적용되는 CSS 애니메이션의 기본(default) 타이밍 함수이기도 합니다.

예제 코드

다음 예제는 div 요소에 ease 타이밍 함수를 적용하여, 왼쪽(left) 위치가 100px에서 200px까지 이동하는 애니메이션을 보여줍니다.

<!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;}
         }
         #demo1 {animation-timing-function: ease;}
      </style>
   </head>
   <body>
      <div id = "demo1">ease effect</div>
   </body>
</html>

코드 설명

animation-name: myanim; — 적용할 @keyframes 규칙의 이름을 지정합니다.
animation-duration: 2s; — 애니메이션 한 사이클의 지속 시간을 2초로 설정합니다.
animation-direction: alternate-reverse; — 역방향부터 시작해 정방향과 번갈아 재생합니다.
animation-iteration-count: 3; — 애니메이션을 총 3회 반복 실행합니다.
#demo1 { animation-timing-function: ease; } — ease 곡선을 적용해 시작과 끝이 부드럽게 처리됩니다.

참고: 다른 타이밍 함수 값

ease 외에도 상황에 따라 다양한 값을 사용할 수 있습니다. linear(처음부터 끝까지 일정한 속도), ease-in(느리게 시작해 빨라짐), ease-out(빠르게 시작해 느리게 끝남), ease-in-out(시작과 끝 모두 느림), 그리고 cubic-bezier()(직접 제어점을 지정해 세밀하게 조절) 등이 대표적입니다.