HTML DOM의 transitionTimingFunction 속성은 요소의 전환(transition) 효과가 진행되는 속도 곡선을 나타내는 함수를 가져오거나 설정하는 데 사용됩니다. 이 속성을 활용하면 애니메이션이 시작부터 끝까지 어떤 방식으로 가속되고 감속할지 세밀하게 제어할 수 있습니다.
문법(Syntax)
transitionTimingFunction 속성의 기본 문법은 다음과 같습니다.
1. 값 반환하기
object.transitionTimingFunction
2. 값 설정하기
object.transitionTimingFunction = "ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() | initial | inherit"
사용 가능한 주요 값은 다음과 같습니다.
- ease – 느리게 시작해 빨라졌다가 다시 느리게 끝나는 기본값
- linear – 처음부터 끝까지 일정한 속도로 진행
- ease-in – 느리게 시작하여 점점 빨라짐
- ease-out – 빠르게 시작하여 점점 느려짐
- ease-in-out – 느리게 시작하고 느리게 끝남
- cubic-bezier() – 사용자가 직접 베지어 곡선을 정의하여 커스텀 속도 곡선 생성
이제 HTML DOM Style transitionTimingFunction 속성의 실제 동작 예제를 살펴보겠습니다.
예제(Example)
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem 0;
}
.circle {
height: 100px;
width: 100px;
background-color: #db133a;
}
.circle:hover {
height: 200px;
width: 200px;
border-radius: 50%;
transition: all 2s;
}
.show {
font-size: 1.2rem;
margin: 1rem 0;
}
</style>
<body>
<h1>DOM Style transitionTimingFunction Property Demo</h1>
<div class='circle'></div>
<button onclick="set()" class="btn">Set transitionTimingFunction</button>
<div class="show">Now, hover on the square</div>
<script>
function set() {
document.querySelector('.circle').style.transitionTimingFunction = "ease-in-out";
}
</script>
</body>
</html>실행 결과(Output)
위 예제에서 “Set transitionTimingFunction” 버튼을 클릭하면 자바스크립트를 통해 빨간색 사각형 요소의 transitionTimingFunction 값이 ease-in-out으로 설정됩니다.
이후 마우스 커서를 빨간색 사각형 위에 올리면(hover), 요소가 2초에 걸쳐 크기가 커지고 원 형태로 변하는 전환 효과가 나타나는데, 이때 ease-in-out 곡선이 적용되어 천천히 시작하고 천천히 끝나는 부드러운 애니메이션을 확인할 수 있습니다.
정리
transitionTimingFunction 속성은 CSS 전환 효과의 질감을 결정하는 핵심 요소입니다. 버튼 클릭, 카드 호버, 메뉴 펼침 등 다양한 UI 인터랙션에서 적절한 타이밍 함수를 선택하면 훨씬 자연스럽고 세련된 사용자 경험을 만들 수 있습니다.