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월.

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

시도해 보기

animation-delay: 250ms;

animation-delay: 2s;

animation-delay: -2s;

<section>  <div>Animation <span></span></div>  <div>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 속성에 지정된 애니메이션에 할당되는 값의 수에 따라 다른 방식으로 지정됩니다. 자세한 내용은여러 애니메이션 속성 값 설정을 참조하십시오.