HTML DOM transitionDuration 속성 – 요소 전환 효과의 지속 시간 설정하기

HTML DOM의 transitionDuration 속성은 HTML 문서에서 특정 요소에 적용된 전환(transition) 효과의 지속 시간을 초(s) 또는 밀리초(ms) 단위로 가져오거나 변경할 수 있게 해주는 속성입니다.

문법(Syntax)

transitionDuration 속성의 기본 문법은 다음과 같습니다.

1. 현재 값 가져오기

object.transitionDuration

2. 값 설정하기

object.transitionDuration = "value"

value 자리에 들어갈 수 있는 값은 아래와 같습니다.

값	설명
initial	이 속성의 값을 기본(default) 값으로 설정합니다.
inherit	부모 요소로부터 이 속성의 값을 상속받습니다.
time	전환 효과의 지속 시간을 초(s) 또는 밀리초(ms) 단위로 지정합니다. 예: "2s", "500ms"

예제 코드

다음은 HTML DOM Style transitionDuration 속성을 활용한 실제 예제입니다.

<!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 1s;
    }
    .show {
        font-size: 1.2rem;
        margin: 1rem 0;
    }
</style>
<body>
<h1>DOM Style transitionDuration Property Demo</h1>
<div class='circle'></div>
<button onclick="set()" class="btn">Change Transition</button>
<div class="show">Now, hover on the square</div>
<script>
    function set() {
        document.querySelector('.circle').style.transitionDuration = "5s";
    }
</script>
</body>
</html>

실행 결과

HTML DOM transitionDuration 속성 – 요소 전환 효과의 지속 시간 설정하기

위 예제를 실행하면 빨간색 사각형과 버튼이 화면에 나타납니다. 먼저 Change Transition 버튼을 클릭한 후, 마우스 커서를 빨간색 사각형 위에 올려보세요(hover).

버튼을 클릭하면 JavaScript가 사각형 요소의 transitionDuration 값을 기존의 1초에서 5초로 변경합니다. 따라서 마우스를 올렸을 때 사각형이 원 모양으로 커지는 전환 효과가 훨씬 느리게, 부드럽게 진행되는 것을 확인할 수 있습니다.

HTML DOM transitionDuration 속성 – 요소 전환 효과의 지속 시간 설정하기

정리

transitionDuration 속성은 CSS transition 효과의 속도를 동적으로 조절해야 할 때 유용하게 사용됩니다. 사용자 인터랙션에 따라 애니메이션 속도를 변경하거나, 특정 상황에서만 전환 효과를 느리게 보여주고 싶은 경우 JavaScript로 간단히 제어할 수 있습니다.