CSS에서 애니메이션 속도 곡선이란?
CSS 애니메이션이 진행되는 동안 요소가 어떤 리듬으로 움직일지 결정하는 것이 바로 속도 곡선(speed curve)입니다. 이를 제어하려면 animation-timing-function 속성을 사용하면 됩니다.
이 속성을 활용하면 애니메이션의 시작과 끝 구간에서 가속 또는 감속 효과를 자유롭게 연출할 수 있어, 더욱 자연스럽고 세련된 사용자 경험을 만들 수 있습니다.
주요 timing-function 값 살펴보기
- ease – 기본값으로, 천천히 시작해 빨라졌다가 다시 느리게 끝납니다.
- ease-in – 느리게 시작한 뒤 점점 빠르게 진행됩니다.
- ease-out – 빠르게 시작해 마지막에 느려지며 부드럽게 종료됩니다.
- ease-in-out – 시작과 끝 모두 느리고 중간 구간이 빠릅니다.
- linear – 처음부터 끝까지 일정한 속도로 움직입니다.
예제 코드
아래 예제는 두 개의 div 요소에 서로 다른 타이밍 함수를 적용하여, 실제 동작 차이를 비교해 볼 수 있도록 구성했습니다. 코드를 실행하면 ease와 ease-in의 움직임 차이를 직접 확인할 수 있습니다.
<!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;}
#demo2 {animation-timing-function: ease-in;}
</style>
</head>
<body>
<div id = "demo1">ease effect</div>
<div id = "demo2">ease-in effect</div>
</body>
</html>코드 설명
위 코드의 핵심 포인트는 다음과 같습니다.
@keyframes myanim을 통해 요소가 왼쪽 위치 100px에서 200px로 이동하는 애니메이션을 정의합니다.animation-duration: 2s로 각 사이클의 지속 시간을 2초로 설정하고,animation-iteration-count: 3으로 3번 반복합니다.#demo1에는ease,#demo2에는ease-in을 적용해 두 요소의 속도 곡선 차이를 보여줍니다.
마무리
animation-timing-function은 CSS 애니메이션의 질감을 좌우하는 핵심 속성입니다. 기본 제공 키워드뿐만 아니라 cubic-bezier() 함수를 사용하면 원하는 형태의 커스텀 속도 곡선도 만들 수 있으니, 다양한 값을 실험해 보며 프로젝트에 맞는 최적의 움직임을 찾아보시기 바랍니다.