HTML DOM Style transition 속성 사용법 – 전환 효과 설정과 반환

HTML DOM의 Style transition 속성은 HTML 문서 내 요소에 적용된 CSS transition 속성 값을 가져오거나 수정하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트만으로도 부드러운 애니메이션 전환 효과를 동적으로 제어할 수 있습니다.

문법(Syntax)

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

1. transition 값 반환하기

object.transition

2. transition 값 설정하기

object.transition = "value"

설정할 수 있는 값(value)은 아래와 같습니다.

값	설명
initial	해당 속성 값을 기본(default) 값으로 되돌립니다.
inherit	부모 요소로부터 해당 속성 값을 상속받습니다.
property duration timing-function delay	전환 효과를 세부적으로 지정합니다. property는 전환이 적용될 CSS 속성의 이름, duration은 전환 지속 시간, timing-function은 전환 효과의 속도 곡선(가속/감속 패턴), delay는 전환 효과가 시작되기까지의 지연 시간을 의미합니다.

예제 코드

다음 예제는 버튼을 클릭하면 사각형 요소에 transition 효과를 적용하고, 마우스를 올리면 크기와 모양이 부드럽게 변하는 동작을 보여줍니다.

<!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%;
    }
    .show {
        font-size: 1.2rem;
        margin: 1rem 0;
    }
</style>
<body>
<h1>DOM Style transition Property Demo</h1>
<div class='circle'></div>
<button onclick="set()" class="btn">Set Transition</button>
<div class="show">이제 빨간 사각형 위에 마우스를 올려보세요</div>
<script>
    function set() {
        document.querySelector('.circle').style.transition = "all 1s";
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 나타납니다.

HTML DOM Style transition 속성 사용법 – 전환 효과 설정과 반환

Set Transition 버튼을 클릭한 뒤, 빨간색 사각형 위에 마우스 커서를 올려보세요. 그러면 사각형이 1초에 걸쳐 부드럽게 확대되면서 원 형태로 변하는 전환 효과를 확인할 수 있습니다.

HTML DOM Style transition 속성 사용법 – 전환 효과 설정과 반환

정리

DOM Style의 transition 속성을 사용하면 CSS 파일을 수정하지 않고도 자바스크립트에서 즉시 전환 효과를 추가하거나 변경할 수 있습니다. 특히 사용자 인터랙션에 따라 애니메이션을 동적으로 제어해야 하는 경우 매우 유용하게 활용됩니다.