CSS transition-timing-function 속성이란?
transition-timing-function 속성은 CSS 전환(transition) 효과가 진행되는 동안 변화가 일어나는 속도 곡선(speed curve)을 지정하는 데 사용됩니다. 즉, 애니메이션이 시작부터 끝까지 어떤 리듬으로 진행될지 결정하는 중요한 속성입니다.
이 속성에 설정할 수 있는 대표적인 값은 다음과 같습니다.
- ease – 기본값으로, 느리게 시작해 빨라졌다가 다시 느리게 끝납니다.
- linear – 처음부터 끝까지 일정한 속도로 진행됩니다.
- ease-in – 느리게 시작하여 점점 빨라집니다.
- ease-out – 빠르게 시작하여 점점 느려지며 끝납니다.
- ease-in-out – 느리게 시작하고 느리게 끝나는 부드러운 곡선입니다.
transition-timing-function 사용 예제
아래 코드를 직접 실행해 보세요. div 요소에 마우스를 올리면 너비가 변하는 전환 효과가 나타나며, 각 요소마다 서로 다른 속도 곡선이 적용된 것을 확인할 수 있습니다.
예제 코드
<!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>코드 설명
위 예제에서는 두 개의 div 요소에 각각 다른 timing function을 적용했습니다. #effect1에는 linear 값이 적용되어 4초 동안 일정한 속도로 너비가 늘어나고, #effect2에는 ease-in 값이 적용되어 처음에는 천천히 시작하다가 점점 빠르게 확장됩니다.
이처럼 transition-timing-function 속성을 적절히 활용하면 웹 페이지의 애니메이션에 자연스러운 리듬감을 부여할 수 있으며, 사용자 경험을 한층 더 세련되게 만들 수 있습니다.