animationDelay 속성은 애니메이션 시퀀스의 시작 시간을 지정하는 데 사용됩니다. 시간 간격 또는 중간에 즉시 시작하도록 설정할 수 있습니다.
구문
다음은 −
의 구문입니다.animationDelay 속성 설정 -
object.style.animationDelay = "time|initial|inherit"
값
다음 값이 될 수 있습니다 -
| 값 | 설명 |
|---|---|
| 시간 | 애니메이션이 시작되기 전에 대기하는 시간(초 또는 밀리초)을 언급합니다. 시간의 기본값은 0입니다. |
| 초기 | 이 속성을 초기 값으로 설정합니다. |
| 상속 | 상위 속성 값을 상속합니다. |
예시
animationDelay 속성의 예를 살펴보겠습니다 -
<!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="The animation will now start after a delay of 5 seconds";
}
</script>
</head>
<body>
<h1>animationDelay property example</h1>
<div id="box"></div>
<p>Change the above animation delay to 5s by clicking the below button</p>
<button onclick="delayChange()">CHANGE DELAY</button>
<p id="Sample"></p>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
1초 후에 애니메이션이 시작되고 전환 도중에 다음 출력을 얻습니다. −
CHANGE DELAY 버튼을 클릭하면 이제 5초 후에 애니메이션이 시작됩니다 -
