animationDelay 속성은 애니메이션 시퀀스가 시작되는 시점을 지정하는 데 사용됩니다. 이 속성을 활용하면 애니메이션을 즉시 실행하거나, 일정 시간 간격 후에 실행하거나, 심지어 애니메이션의 중간 지점부터 실행되도록 설정할 수 있습니다.
문법(Syntax)
animationDelay 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.animationDelay = "time|initial|inherit"
속성 값
animationDelay 속성에 사용할 수 있는 값은 다음과 같습니다.
| 값 | 설명 |
|---|---|
| time | 애니메이션이 시작되기 전까지 대기할 시간을 초(s) 또는 밀리초(ms) 단위로 지정합니다. 기본값은 0이며, 음수 값을 입력하면 애니메이션이 이미 진행된 것처럼 중간부터 재생됩니다. |
| initial | 해당 속성을 브라우저의 기본(initial) 값으로 설정합니다. |
| inherit | 부모 요소의 속성 값을 상속받아 적용합니다. |
예제
다음은 animationDelay 속성의 실제 동작을 확인할 수 있는 예제입니다. 버튼을 클릭하면 자바스크립트를 통해 애니메이션 지연 시간이 5초로 변경됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 50px;
height: 50px;
border-radius: 10%;
background: lightgreen;
position: relative;
animation: glide 5s;
animation-delay: 1s;
transition: 0.5s;
}
@keyframes glide {
from {left: 0px;}
to {left: 200px; background-color: lightblue;}
}
</style>
<script>
function delayChange(){
document.getElementById("box").style.animationDelay="5s";
document.getElementById("Sample").innerHTML="애니메이션이 이제 5초 후에 시작됩니다";
}
</script>
</head>
<body>
<h1>animationDelay 속성 예제</h1>
<div id="box"></div>
<p>아래 버튼을 클릭하여 위 애니메이션의 지연 시간을 5초로 변경해 보세요</p>
<button onclick="delayChange()">CHANGE DELAY</button>
<p id="Sample"></p>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
페이지 로드 후 1초가 지나면 애니메이션이 시작되며, 진행 과정의 중간 지점에서는 아래와 같은 화면을 볼 수 있습니다.
CHANGE DELAY 버튼을 클릭하면 애니메이션의 지연 시간이 5초로 변경되어, 클릭 후 5초가 지난 뒤에야 애니메이션이 시작됩니다.
