전환 효과의 속도 곡선을 설정하려면 transitionTimingFunction 속성을 사용하면 됩니다. 이 속성에는 ease, ease-in, ease-out, linear 등 다양한 값을 지정할 수 있습니다.
주요 속도 곡선 값 살펴보기
- ease: 기본값으로, 느리게 시작해 빨라졌다가 다시 느리게 끝납니다.
- linear: 처음부터 끝까지 일정한 속도로 진행됩니다.
- ease-in: 느리게 시작하여 점점 빨라집니다.
- ease-out: 빠르게 시작하여 점점 느려집니다.
예제
아래 코드를 실행하면 JavaScript로 전환 효과의 속도 곡선을 확인하고 변경할 수 있습니다. 버튼을 클릭하면 DIV2 요소에 ease-in 값이 적용되어, 마우스를 올렸을 때 천천히 시작하고 점점 빨라지는 애니메이션 효과를 볼 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: relative;
margin: 10px;
height: 300px;
width: 400px;
padding: 20px;
border: 2px solid blue;
}
#div2 {
padding: 80px;
position: absolute;
border: 2px solid BLUE;
background-color: yellow;
transform: rotateY(45deg);
transition: all 5s;
}
#div2:hover {
background-color: orange;
width: 50px;
height: 50px;
padding: 100px;
border-radius: 50px;
}
</style>
</head>
<body>
<p>DIV2 위에 마우스를 올려보세요</p>
<button onclick = "display()">설정</button>
<div id = "div1">DIV1
<div id = "div2">DIV2</div>
</div>
<script>
function display() {
document.getElementById("div2").style.transitionTimingFunction =
"ease-in";
}
</script>
</body>
</html>위 예제에서 display() 함수가 호출되면 transitionTimingFunction 속성이 ease-in으로 설정됩니다. 이후 DIV2에 마우스를 올리면 배경색, 크기, 모서리 둥글기 등이 5초 동안 부드럽게 변화하며, 그 과정에서 지정된 속도 곡선이 적용됩니다.