如何 FadeIn 父元素，然后它的子元素有轻微的延迟（仅限 CSS）

Question

我想要 fadein body 元素，然后 fadein 其中一个子元素稍有延迟。

我已经试过了，但没用

body {
    animation: fadein 0.5s;
}

header {
    animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

我也试过使用 animation-delay 但没有用。

Answer 1

body {
  animation: fadein 0.5s forwards; /* use forwards to maintain the last  keyframe state */
}

header {
  opacity:0;      /* You need this initial opacity */
  animation: fadein 2s 1s forwards; /* 1s is the delay */
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

P.S：不确定 body 是否是最佳父选项，但这里有一个使用 DIV 父选项的示例：

html, body{height:100%;}

#page {
  height:100%;
  background:green;
  animation: fadein 0.5s forwards;
}

header {
  opacity:0;
  animation: fadein 2s 1s forwards;
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

<div id="page">
  <header>THIS IS HEADER</header>
</div>

如何 FadeIn 父元素，然后它的子元素有轻微的延迟（仅限 CSS）

How to FadeIn a parent element and then it's child elements with a slight Delay (CSS Only)

css

css-animations