animation-delay

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 9월.

Learn more
See full compatibility

animation-delay CSS 속성은 애니메이션이 시작할 시점을 지정합니다. 시작 즉시, 잠시 후에, 또는 애니메이션이 일부 진행한 시점부터 시작할 수 있습니다.

시도해 보기

animation-delay: 250ms;

animation-delay: 2s;

animation-delay: -2s;

<section class="flex-column" id="default-example">
 <div>Animation <span id="playstatus"></span></div>
 <div id="example-element">Select a delay to start!</div>
</section>

#example-element {
 background-color: #1766aa;
 color: white;
 margin: auto;
 margin-left: 0;
 border: 5px solid #333;
 width: 150px;
 height: 150px;
 border-radius: 50%;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
}
#playstatus {
 font-weight: bold;
}
.animating {
 animation-name: slide;
 animation-duration: 3s;
 animation-timing-function: ease-in;
 animation-iteration-count: 2;
 animation-direction: alternate;
}
@keyframes slide {
 from {
 background-color: orange;
 color: black;
 margin-left: 0;
 }
 to {
 background-color: orange;
 color: black;
 margin-left: 80%;
 }
}

"use strict";
window.addEventListener("load", () => {
 const el = document.getElementById("example-element");
 const status = document.getElementById("playstatus");
 function update() {
 status.textContent = "delaying";
 el.className = "";
 window.requestAnimationFrame(() => {
 window.requestAnimationFrame(() => {
 el.className = "animating";
 });
 });
 }
 el.addEventListener("animationstart", () => {
 status.textContent = "playing";
 });
 el.addEventListener("animationend", () => {
 status.textContent = "finished";
 });
 const observer = new MutationObserver(() => {
 update();
 });
 observer.observe(el, {
 attributes: true,
 attributeFilter: ["style"],
 });
 update();
});

animation 단축 속성을 사용해 애니메이션 관련 속성을 편리하게 같이 지정할 수 있습니다.

구문

css

/* Single animation */
animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;
/* Multiple animations */
animation-delay: 2.1s, 480ms;

값

<time>

애니메이션이 시작될 요소가 적용되는 순간부터의 시간 오프셋입니다. 이 값은 초 또는 밀리 초 (ms)로 지정할 수 있습니다. 이 값은 필수입니다.

양수 값은 지정된 시간이 경과 한 후 애니메이션이 시작되어야 함을 나타냅니다. 기본값인 0의 값은 애니메이션이 적용되는 즉시 시작해야 함을 나타냅니다.

음수 값을 지정하면 애니메이션이 즉시 시작되지만 애니메이션 주기의 도중에 시작됩니다. 예를 들어 애니메이션 지연 시간으로 -1s를 지정하면 애니메이션이 즉시 시작되지만 애니메이션 시퀀스의 1초부터 시작됩니다. 만약 animation-delay에 음수 값을 지정했지만 시작값이 절대값이면 시작값은 애니메이션이 요소에 적용된 시점부터 가져옵니다.

참고 : animation- * 속성에 여러 개의 쉼표로 구분 된 값을 지정하면 animation-name 속성에 지정된 애니메이션에 할당되는 값의 수에 따라 다른 방식으로 지정됩니다. 자세한 내용은 여러 애니메이션 속성 값 설정을 참조하십시오.