CSS의 transition-timing-function 속성은 요소가 변화할 때 속도가 어떤 곡선을 따라 진행되는지를 결정합니다. 즉, 전환 효과가 시작부터 끝까지 일정한 속도로 진행될지, 천천히 시작해서 빨라질지, 아니면 빠르게 시작해서 느려질지를 제어할 수 있습니다.
주요 키워드 값
- linear — 시작부터 끝까지 동일한 속도로 진행됩니다.
- ease — 기본값으로, 천천히 시작하여 빨라졌다가 다시 느리게 끝납니다.
- ease-in — 느린 속도로 시작하여 점점 빨라집니다.
- ease-out — 빠른 속도로 시작하여 점점 느려지며 끝납니다.
- ease-in-out — 느리게 시작하고 느리게 끝나는 부드러운 곡선입니다.
- cubic-bezier(n, n, n, n) — 베지어 곡선을 직접 정의해 원하는 속도 곡선을 만들 수 있습니다.
예제 코드
아래 예제에서는 세 개의 div 요소에 서로 다른 타이밍 함수를 적용했습니다. 각 요소에 마우스를 올리면 너비가 4초에 걸쳐 변하면서 속도 곡선의 차이를 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
color: white;
margin-bottom: 10px;
transition: width 4s;
}
#effect1 {
transition-timing-function: linear;
}
#effect2 {
transition-timing-function: ease-in;
}
#effect3 {
transition-timing-function: ease-out;
}
div:hover {
width: 250px;
}
</style>
</head>
<body>
<h1>전환 효과(Transition Effect)</h1>
<p>각 div 요소 위에 마우스를 올려 전환 효과와 속도의 차이를 확인해 보세요.</p>
<div id="effect1">linear 효과</div>
<div id="effect2">ease-in 효과</div>
<div id="effect3">ease-out 효과</div>
</body>
</html>실행 결과 살펴보기
코드를 실행한 뒤 각 박스에 마우스 커서를 올려보면 다음과 같은 차이를 확인할 수 있습니다.
- linear: 처음부터 끝까지 일정한 속도로 너비가 늘어납니다.
- ease-in: 천천히 출발했다가 점점 가속하며 끝납니다.
- ease-out: 빠르게 출발했다가 점점 감속하며 부드럽게 멈춥니다.
정리
transition-timing-function을 활용하면 같은 전환 시간이라도 느낌이 완전히 달라집니다. 버튼, 메뉴, 카드 등 UI 요소에 자연스러운 애니메이션을 적용하고 싶다면 상황에 맞는 타이밍 함수를 선택하는 것이 중요합니다. 더 세밀한 제어가 필요하다면 cubic-bezier() 함수를 사용해 자신만의 속도 곡선을 직접 설계해 보세요.