transition-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æ.

CSS ã® transition-delay ããããã£ã¯ãå¤ãå¤æ´ãããã¨ãã«ããããã£ã®ãã©ã³ã¸ã·ã§ã³å¹æãå§ã¾ãã¾ã§ã®å¾ã¡æéãæå®ãã¾ãã

è©¦ãã¦ã¿ã¾ããã

transition-delay: 250ms;
transition-property: margin-right;

transition-delay: 1s;
transition-property: background-color;

transition-delay: 1s;
transition-property: margin-right, color;

transition-delay: 1s, 250ms;
transition-property: margin-right, color;

<section id="default-example">
  <div id="example-element">ãã©ã³ã¸ã·ã§ã³ãè¦ãã«ã¯<br />ãã¤ã³ã¿ã¼ãå½ã¦ã¦ãã ãã</div>
</section>

#example-element {
  background-color: #e4f0f5;
  color: black;
  padding: 1rem;
  border-radius: 0.5rem;
  font: 1em monospace;
  width: 100%;
  transition: margin-right 2s;
}

#default-example:hover > #example-element {
  background-color: #990099;
  color: white;
  margin-right: 40%;
}

å¾ã¡æéã¯ã¼ããæ£ã®æ°ãè² ã®æ°ã§æå®ãã¾ãã

0s (ã¾ãã¯ 0ms) ã®å¤ã¯ç´ã¡ã«ãã©ã³ã¸ã·ã§ã³å¹æãå§ã¾ãã¾ãã
æ£ã®æ°ã®å ´åã¯ãæå®ãããæéã®é·ãã®åã ããã©ã³ã¸ã·ã§ã³å¹æãå§ã¾ãã®ãéãã¾ãã
è² ã®æ°ã®å ´åã¯ãç´ã¡ã«ãã©ã³ã¸ã·ã§ã³å¹æããå¹æã®éä¸ããå§ã¾ãã¾ããè¨ãæããã°ãå¹æã¯æå®ãããæéã®é·ãã®åã ãæ¢ã«å®è¡ããã¦ãããã®ããã«åãã¾ãã

æ§æ

css

/* <time> å¤ */
transition-delay: 3s;
transition-delay: 2s, 4ms;

/* ã°ãã¼ãã«å¤ */
transition-delay: inherit;
transition-delay: initial;
transition-delay: revert;
transition-delay: revert-layer;
transition-delay: unset;

å¤

<time>: ããããã£ã®å¤ãå¤åãã¦ãããã©ã³ã¸ã·ã§ã³å¹æãå§ã¾ãã¾ã§ã®å¾ã¡æéãè¨è¿°ãã¾ãã

å¬å¼å®ç¾©

åæå¤	`0s`
é©ç¨å¯¾è±¡	ãã¹ã¦ã®è¦ç´ ã`::before` / `::after` æ¬ä¼¼è¦ç´
ç¶æ¿	ãªã
è¨ç®å¤	æå®éã
ã¢ãã¡ã¼ã·ã§ã³ã®ç¨®é¡	ã¢ãã¡ã¼ã·ã§ã³ä¸å¯

å½¢å¼ææ³

transition-delay = 
  <time>#

ä¾

æ§ããªå¾ã¡æéãç¤ºãä¾

HTML

html

<div class="box delay-1">0.5 ç§</div>

<div class="box delay-2">2 ç§</div>

<div class="box delay-3">4 ç§</div>

<button id="change">å¤æ´</button>

CSS

css

.box {
  margin: 20px;
  padding: 10px;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 18px;
  transition-property: background-color, font-size, transform, color;
  transition-timing-function: ease-in-out;
  transition-duration: 3s;
}

.transformed-state {
  transform: rotate(270deg);
  background-color: blue;
  color: yellow;
  font-size: 12px;
  transition-property: background-color, font-size, transform, color;
  transition-timing-function: ease-in-out;
  transition-duration: 3s;
}

.delay-1 {
  transition-delay: 0.5s;
}

.delay-2 {
  transition-delay: 2s;
}

.delay-3 {
  transition-delay: 4s;
}

JavaScript

function change() {
  const elements = document.querySelectorAll("div.box");
  for (const element of elements) {
    element.classList.toggle("transformed-state");
  }
}

const changeButton = document.querySelector("#change");
changeButton.addEventListener("click", change);