Question

我想fadein身体元素，然后body { animation: fadein 0.5s; } header { animation: fadein 2s; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }其中一个孩子稍稍延迟。

我试过这个，但它没有用

animation-delay

我也尝试使用function myFunction() { var x = document.getElementById("myText").value; document.getElementById("demo").innerHTML = x; }，但这没有帮助。

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>

如何淡化父元素然后它的子元素稍有延迟（仅限CSS）

1 个答案: