CSS transition-delay 속성이란?
CSS의 transition-delay 속성은 전환(transition) 효과가 시작되기 전까지의 대기 시간을 지정합니다. 이 속성을 활용하면 요소의 상태가 변경되더라도 즉시 애니메이션이 실행되지 않고, 설정한 시간만큼 기다린 후 전환이 부드럽게 진행됩니다.
지연 시간은 초(s) 또는 밀리초(ms) 단위로 지정할 수 있습니다. 예를 들어 transition-delay: 1s;로 설정하면 전환 효과가 시작되기 전에 1초의 지연이 발생합니다.
예제: 1초 지연 후 너비 전환 효과
다음 코드는 div 요소에 마우스를 올리면(hover) 1초의 지연 후에 너비가 150px에서 250px로 서서히 변하는 예제입니다. 아래 코드를 직접 실행해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: blue;
transition: width 3s;
transition-delay: 1s;
}
div:hover {
width: 250px;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>Hover over the below box to change its width. It begins with a delay of 1 second.</p>
<div></div>
</body>
</html>코드 동작 방식
width 3s: 너비(width) 속성의 변화가 3초에 걸쳐 천천히 일어나도록 설정합니다.
transition-delay: 1s: 전환 효과가 시작되기 전에 1초간 대기하도록 지정합니다.
div:hover: 마우스를 올리면 해당 요소의 너비가 250px로 변경되어 전환 애니메이션이 트리거됩니다.
이처럼 transition-delay 속성을 사용하면 버튼 클릭, 메뉴 펼침 등 다양한 인터랙션에서 자연스러운 타이밍 연출이 가능합니다. 여러 속성에 각각 다른 지연 시간을 적용하면 더욱 세련된 순차 애니메이션 효과도 만들 수 있습니다.