전환 효과 지속 시간 설정하기
웹 페이지에서 요소에 적용된 전환(transition) 효과가 완료되기까지 걸리는 시간을 설정하려면 JavaScript의 transitionDuration 속성을 사용하면 됩니다. 이 속성은 CSS의 transition-duration 속성에 대응하며, 값을 초(s) 또는 밀리초(ms) 단위로 지정해 전환 애니메이션의 속도를 자유롭게 조절할 수 있습니다.
예제
다음 코드를 실행하면 전환 효과가 완료되는 데 걸리는 시간이 몇 초인지 직접 확인할 수 있습니다. DIV2 영역에 마우스 커서를 올리면 배경색, 크기, 패딩, 테두리 반경이 부드럽게 변화하며, [설정] 버튼을 클릭하면 div2 요소의 전환 지속 시간이 5초로 지정됩니다.
<!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() {
// [설정] 버튼을 클릭하면 div2의 전환 지속 시간이 5초로 변경됩니다
document.getElementById("div2").style.transitionDuration = "5s";
}
</script>
</body>
</html>
문법 및 활용 팁
transitionDuration 속성의 기본 문법은 다음과 같습니다.
object.style.transitionDuration = "5s";
시간 값은 초(s) 또는 밀리초(ms) 단위로 지정할 수 있습니다. 예를 들어 "5s"는 5초를 의미하며, "5000ms" 역시 5000밀리초, 즉 5초와 동일합니다. 기본값은 0s이고, 여러 개의 값을 쉼표로 구분해 나열하면 각각의 CSS 속성에 서로 다른 지속 시간을 개별적으로 적용할 수도 있습니다.