CSS에서 애니메이션이 느린 속도로 부드럽게 끝나도록 설정하려면 animation-timing-function 속성에 ease-out 값을 사용하면 됩니다.
ease-out은 애니메이션이 시작할 때는 빠르게 진행되다가, 끝으로 갈수록 점점 느려지는 가속 곡선을 적용합니다. 이를 통해 요소가 목표 지점에 자연스럽게 '착지'하는 듯한 시각 효과를 연출할 수 있어, UI 인터랙션에서 매우 널리 사용됩니다.
animation-timing-function의 주요 값 비교
- ease-out: 빠른 시작 → 느린 종료 (부드러운 마무리)
- ease-in: 느린 시작 → 빠른 종료
- ease-in-out: 느린 시작 → 빠른 중간 → 느린 종료
- linear: 처음부터 끝까지 일정한 속도
예제 코드
아래 예제는 사각형 div 요소에 ease-out 타이밍 함수를 적용해 왼쪽 위치가 100px에서 200px로 이동하는 애니메이션을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
position: relative;
background-color: #808000;
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: ease-out;}
</style>
</head>
<body>
<div id = "demo">ease-out 효과</div>
</body>
</html>코드 설명
animation-name: myanim;— 적용할 @keyframes 애니메이션의 이름을 지정합니다.animation-duration: 2s;— 한 번의 애니메이션 사이클이 2초 동안 진행됩니다.animation-direction: alternate-reverse;— 각 사이클마다 방향을 반대로 전환하며 역방향부터 재생합니다.animation-iteration-count: 3;— 애니메이션을 총 3번 반복 실행합니다.#demo { animation-timing-function: ease-out; }— id가 demo인 요소에만 ease-out 타이밍 함수를 적용해, 이동이 끝날 때 속도가 점차 줄어들게 합니다.
브라우저에서 위 코드를 실행하면 초록색 박스가 좌우로 움직이면서 각 이동의 마지막에 속도가 자연스럽게 감소하는 것을 확인할 수 있습니다. 더 세밀한 조절이 필요하다면 cubic-bezier() 함수를 사용해 커스텀 타이밍 곡선을 정의할 수도 있습니다.