CSS에서 애니메이션의 속도 곡선(가속 패턴)을 지정하려면 animation-timing-function 속성을 사용합니다. 이 속성은 애니메이션이 한 사이클 동안 어떤 방식으로 진행되는지, 즉 시작부터 끝까지 속도가 어떻게 변화하는지를 결정합니다.
animation-timing-function의 주요 값
- ease – 기본값으로, 느리게 시작한 후 빨라지고 마지막에 다시 느려집니다.
- ease-in – 느린 속도로 시작하여 점점 빨라집니다.
- ease-out – 빠른 속도로 시작하여 점점 느려집니다.
- ease-in-out – 느리게 시작하고 빨라진 뒤, 다시 느리게 끝납니다.
- linear – 처음부터 끝까지 일정한 속도로 진행됩니다.
- cubic-bezier(n, n, n, n) – 베지어 곡선 값을 직접 정의하여 사용자 지정 속도 곡선을 만들 수 있습니다.
예제: ease와 ease-in 효과 비교하기
다음 코드를 실행하면 두 개의 노란색 상자가 서로 다른 타이밍 함수로 움직이는 모습을 확인할 수 있습니다. 첫 번째 상자에는 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 효과</div>
<div id = "demo2">ease-in 효과</div>
</body>
</html>
코드 설명
위 예제의 핵심 속성은 다음과 같습니다.
- animation-duration: 2s – 애니메이션 한 사이클이 2초 동안 진행됩니다.
- animation-direction: alternate-reverse – 역방향으로 시작하여 매 사이클마다 방향을 번갈아 전환합니다.
- animation-iteration-count: 3 – 애니메이션을 총 3회 반복 재생합니다.
#demo1 요소에는 ease 값이 적용되어 부드럽게 가속했다가 감속하며 움직이고, #demo2 요소에는 ease-in 값이 적용되어 천천히 출발한 뒤 점점 빠르게 이동합니다. 브라우저에서 직접 실행해 보면 두 상자의 움직임 차이를 시각적으로 비교할 수 있으며, 이를 통해 각 타이밍 함수가 애니메이션의 느낌에 어떤 영향을 주는지 쉽게 이해할 수 있습니다.