CSS 전환 효과(transition)가 시작되는 시점을 지연시키고 싶다면 JavaScript의 transitionDelay 속성을 사용하면 됩니다. 이 속성은 전환 효과가 실제로 실행되기 전까지 대기할 시간을 초 단위(s) 또는 밀리초 단위(ms)로 지정합니다.
예를 들어 transitionDelay 값을 "1s"로 설정하면, 마우스를 올리거나 조건이 충족된 후 1초 뒤에 전환 효과가 시작됩니다. 아래 예제 코드를 직접 실행하면서 JavaScript로 전환 효과의 시작 시점을 설정하고 확인하는 방법을 익혀보세요.
예제 코드
<!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";
document.getElementById("div2").style.transitionDelay = "1s";
}
</script>
</body>
</html>코드 설명
위 예제에서는 버튼을 클릭하면 display() 함수가 호출되어 DIV2 요소에 두 가지 속성이 적용됩니다.
transitionTimingFunction은 전환이 진행되는 동안의 속도 곡선을 결정합니다. 여기서는 "ease-in"으로 설정하여 전환이 천천히 시작되었다가 점점 빨라지도록 했습니다.
transitionDelay는 전환 효과가 시작되기 전의 지연 시간을 의미합니다. "1s"로 설정했기 때문에 DIV2 위에 마우스를 올린 후 1초가 지난 뒤에야 색상 변화와 크기 조절 같은 전환 효과가 나타납니다.
버튼을 클릭하기 전과 후에 각각 DIV2에 마우스를 올려보면, 지연 시간이 적용되기 전과 후의 차이를 명확하게 비교할 수 있습니다.