CSS 动画不被延迟并在动画后重置

Question

基本上我需要使用CSS动画来使3行文本逐条淡入（没有JavaScript或其他CSS模块）

这是我为此编写的错误代码：

body{background-color: black;}

.text-zone{
  position: absolute;
    left: 20%;
    top: 35%;
  width: 50%;
    max-height: 90%;
}

.text{
  font-size: 60px;
  color: #fff;
  line-height: 53px;
  font-weight: 600;
  font-family: 'Alegreya Sans', sans-serif;
}

#delayedText1 {
  opacity: 0;
  animation-name: fade1;
  animation-duration: 1s;
  animation-delay: 1s;
}

#delayedText2 {
  opacity: 0;
  animation-name: fade2;
  animation-duration: 1s;
  animation-delay: 1s;
}

#delayedText3 {
  opacity: 0;
  animation-name: fade3;
  animation-duration: 1s;
  animation-delay: 1s;
}

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

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

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

<div class="text-zone">
  <div class="text">
    <h1 id="delayedText1">Hi,</h1>
    <h1 id="delayedText2">I'm Faizan,</h1>
    <h1 id="delayedText3">web developer.</h1>
  </div>
</div>

因此，当它运行时，页面空白一秒钟，然后所有文本同时淡入，一秒钟后消失。这是我第一次使用 CSS 动画，所以这可能是一个简单的问题。请有人向我解释哪里出了问题。

谢谢。

Answer 1

#delayedText1 { 不透明度：0； animation-name：褪色1； animation-duration：2秒； animation-delay：3秒； } #delayedText2 { 不透明度：0； animation-name：褪色2； animation-duration：2秒； animation-delay：6秒； } #delayedText3 { 不透明度：0； animation-name：褪色3； animation-duration：2秒； animation-delay: 9s; }

与您在此处键入的代码相同，您应该将其组合到脚本中，它将完美运行祝你好运

CSS 动画不被延迟并在动画后重置

CSS animation not being delayed and resetting after animation

html

css

animation

fade

css-animations