CSS의 animation-timing-function 속성은 애니메이션이 한 주기(사이클) 동안 진행되는 속도 곡선을 지정합니다. 쉽게 말해, 애니메이션이 시작부터 끝까지 어떤 리듬으로 움직일지를 결정하는 요소로, 자연스러운 모션 효과를 만드는 데 핵심적인 역할을 합니다.
주요 타이밍 함수 값
- ease: 기본값으로, 천천히 시작했다가 빨라진 후 마지막에 다시 느려집니다.
- ease-in: 느리게 시작하여 점점 빨라집니다.
- ease-out: 빠르게 시작하여 점점 느려집니다.
- ease-in-out: 양쪽 끝에서는 느리고 중간 구간에서 빠르게 진행됩니다.
- linear: 처음부터 끝까지 일정한 속도로 진행됩니다.
- cubic-bezier(n,n,n,n): 베지어 곡선을 이용해 원하는 속도 곡선을 직접 정의할 수 있습니다.
예제
아래 코드를 실행하면 두 개의 박스가 각각 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>코드 설명
위 예제에서는 150×200 크기의 노란색 div 요소 두 개를 만들고, @keyframes 규칙(myanim)을 통해 왼쪽 위치(left)를 100px에서 200px로 이동하도록 정의했습니다. 애니메이션 지속 시간은 2초이며, alternate-reverse 방향으로 3회 반복됩니다.
첫 번째 박스(#demo1)에는 ease가 적용되어 부드럽게 가속·감속하는 반면, 두 번째 박스(#demo2)에는 ease-in이 적용되어 처음에는 느리게 움직이다가 점점 빨라지는 차이를 눈으로 비교해 볼 수 있습니다. 이처럼 타이밍 함수만 바꿔도 애니메이션의 느낌이 크게 달라지므로, 상황에 맞는 값을 선택하는 것이 중요합니다.