CSS transition-timing-function 속성이란?
transition-timing-function은 CSS 전환(transition) 효과가 진행되는 동안 변화의 속도를 어떤 곡선으로 조절할지 지정하는 속성입니다. 같은 지속 시간이라도 이 속성에 따라 시작이 빠르거나, 끝이 느려지는 등 완전히 다른 느낌의 애니메이션을 연출할 수 있습니다.
대표적인 값은 다음과 같습니다.
- linear: 처음부터 끝까지 일정한 속도로 진행됩니다.
- ease(기본값): 천천히 시작해 빨라졌다가 다시 느리게 끝납니다.
- ease-in: 느리게 시작해서 점점 빨라집니다.
- ease-out: 빠르게 시작해서 점점 느려지며 끝납니다.
- ease-in-out: 느리게 시작하고, 느리게 끝나는 부드러운 곡선입니다.
transition-timing-function 사용 예제
아래 예제에서는 세 개의 div 요소에 서로 다른 타이밍 함수(linear, ease-in, ease-out)를 적용했습니다. 각 div에 마우스를 올려보면(hover), 같은 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>코드 설명
모든 div 요소에는 transition: width 4s;가 적용되어 있어, 마우스를 올리면 너비가 100px에서 250px로 4초에 걸쳐 변합니다. 여기서 #effect1, #effect2, #effect3에 각각 다른 타이밍 함수를 지정하여 속도 곡선의 차이를 보여줍니다.
- linear: 4초 내내 같은 속도로 균일하게 확장됩니다.
- ease-in: 처음에는 느리게 움직이다가 점점 가속하며 마지막에 빠르게 확장됩니다.
- ease-out: 반대로 처음에 빠르게 확장되다가 끝으로 갈수록 감속합니다.
커스텀 베지어 곡선 활용하기
기본 제공 키워드 외에도 cubic-bezier() 함수를 사용하면 원하는 속도 곡선을 직접 정의할 수 있습니다. 예를 들어 cubic-bezier(0.25, 0.1, 0.25, 1)은 기본값인 ease와 동일한 곡선입니다. 더 세밀한 애니메이션 제어가 필요하다면 베지어 곡선 값을 조정해 보세요.
마무리
transition-timing-function은 웹 UI에서 자연스럽고 세련된 애니메이션을 만드는 핵심 속성입니다. 버튼 hover 효과, 메뉴 열림/닫힘, 카드 확장 등 다양한 인터랙션에 적절한 타이밍 함수를 적용하면 사용자 경험이 크게 향상됩니다. 직접 코드를 실행하며 각 값의 차이를 체감해 보는 것이 가장 좋은 학습 방법입니다.