CSS로 전환 효과를 지연시키는 방법
CSS에서 전환(transition) 효과의 시작을 늦추고 싶다면 transition-delay 속성을 사용하면 됩니다. 이 속성은 요소에 변화가 발생한 후 실제로 전환이 시작되기까지의 대기 시간을 초 단위(s) 또는 밀리초 단위(ms)로 지정합니다.
예를 들어 마우스를 올렸을 때(hover) 상자의 너비가 변경되도록 설정하되, 1초 후에 애니메이션이 시작되도록 만들 수 있습니다.
transition-delay 기본 문법
transition-delay: 시간;
시간 값으로 1s(1초), 500ms(0.5초)처럼 원하는 지연 시간을 입력합니다. 음수 값을 사용하면 전환 효과가 이미 진행된 상태에서 시작됩니다.
예제 코드
아래 예제는 파란색 상자에 마우스를 올리면 1초의 지연 후 3초에 걸쳐 너비가 늘어나는 코드입니다.
<!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>아래 상자에 마우스를 올려보세요. 너비가 1초의 지연 후 변경됩니다.</p>
<div></div>
</body>
</html>코드 설명
- transition: width 3s; — 너비 속성이 3초 동안 부드럽게 변화하도록 설정합니다.
- transition-delay: 1s; — 전환이 시작되기 전에 1초간 대기하도록 지연 시간을 추가합니다.
- div:hover — 마우스를 올렸을 때 너비가 150px에서 250px로 변경됩니다.
transition 단축 속성으로 한 번에 작성하기
지연 시간은 transition 단축 속성의 마지막 값으로 함께 지정할 수도 있습니다. 두 개의 시간 값이 있으면 첫 번째는 지속 시간(duration), 두 번째는 지연 시간(delay)으로 해석됩니다.
div {
transition: width 3s 1s; /* 지속 시간 3초, 지연 시간 1초 */
}이렇게 하면 별도의 transition-delay 선언 없이도 동일한 결과를 얻을 수 있어 코드가 더 간결해집니다.