CSS에서 전환(트랜지션) 효과의 속도 곡선을 설정하려면 transition-timing-function 속성을 사용합니다. 이 속성은 애니메이션이 시작부터 끝까지 진행되는 동안 속도가 어떻게 변화하는지 제어하며, 요소에 자연스러운 움직임을 부여하는 데 핵심적인 역할을 합니다.
주요 속성 값
- ease – 기본값으로, 느리게 시작했다가 빨라진 후 다시 느리게 끝납니다.
- linear – 처음부터 끝까지 일정한 속도로 진행됩니다.
- ease-in – 느리게 시작하여 점점 빨라집니다.
- ease-out – 빠르게 시작하여 점점 느려집니다.
- ease-in-out – 느리게 시작하고 느리게 종료됩니다.
- cubic-bezier(n, n, n, n) – 베지어 곡선 값을 직접 지정하여 원하는 형태의 사용자 정의 속도 곡선을 만들 수 있습니다.
예제
아래 코드를 실행한 뒤 div 요소 위에 마우스 커서를 올려 보세요. linear와 ease-in 두 가지 타이밍 함수가 적용된 전환 효과의 속도 차이를 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 4s;
}
#effect1 {
transition-timing-function: linear;
}
#effect2 {
transition-timing-function: ease-in;
}
div:hover {
width: 250px;
}
</style>
</head>
<body>
<h1>전환 효과</h1>
<p>div 요소에 마우스를 올려 전환 효과와 속도 변화를 확인해 보세요:</p>
<div id = "effect1">linear 효과</div><br>
<div id = "effect2">ease-in 효과</div><br>
</body>
</html>