Erstellen Sie für jede Zeile in einer Sequenz eine CSS-basierte Tippanimation

Question

<div class='screen'>
  <div class='text-container'>
    <p class='text'>A problem has been detected and system has been shut down to prevent damage to your computer.
    </p>
    <br />
    <p class='text'>IRQL_NOT_LESS_OR_EQUAL</p>
    <br />
    <p class='text'>If this is the first time you've seen this Stop error screen, restart your computer.</p>
    <p class='text'>If this screen appears again, follow these steps:</p>
    <br />
    <p class='text'>Check to make sure any new hardware or soFtware is properly installed.</p>
    <p class='text'>If this is a new installation,</p>
    <p class='text'>ask your hardware or soFtware manufacturer for any system updates you might need.</p>
    <br />
    <p class='text'>If problems continue, disable or remove any newly installed hardware or soFtware.</p>
    <p class='text'>Disable BIOS memory options such as caching or shadowing.</p>
    <p class='text'>If you need to use Safe Mode to remove or disable components, restart your computer.</p>
    <p class='text'>press F8 to select Advanced Startup options, and then select Safe Mode.</p>
    <br />
    <p class='text'>Technical information:</p>
    <br />
    <p class='text'>*** STOP: 0x0000000A /0x0000000000004A,</p>
    <p class='text'>0x0000000000000002, 0x0000000000000001, 0xFFFFF80002B37ABF</p>
    <br />
    <p class='text'>Collecting data for crash dump ...</p>
    <p class='text'>Initializing disk for crash dump ...</p>
    <p class='text'>Beginning dump of physical memory.</p>
  </div>
</div>

*{
  padding: 0;
  margin:0;
  box-sizing: border-box;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

div.screen {
    background-color: #032f7c;

    div.text-container {
      padding: 20px;
      
      p.text {
        font-family: monospace;
        color: #ebf6ff;
        overflow: hidden;
        white-space: nowrap;
        letter-spacing: 1.5px;
        animation: typing 5s steps(90, end);
      }
    }
  }

Was ich tun möchte, ist, dem Benutzer hier Text mit einer Tippanimation anzuzeigen, Zeile für Zeile, von oben nach unten. Ich habe viele Möglichkeiten ausprobiert, aber nichts außer jedem p.text 元素定义不同的 keyframe 之外，我找不到其他解决方案。这样我的代码就变成了意大利面条，因为有 17 个 p.text Element. was mache ich?

Hier ist der Codepen-Link für diese Frage: https://codepen.io/mehmetguduk/pen/RwJqzpN

Answer 1

您需要手动对每行应用延迟。对于 SCSS，执行此操作的示例代码片段是使用 @for 循环，然后将索引乘以动画的持续时间。

@for $i from 0 through 20 {
      p.text:nth-of-type(#{$i + 1}) {
        animation-delay: #{$i * 4}s;
      }
    }

当然，这需要一些额外的调整来实现完美的时机，但应该能让您大致了解如何解决这个问题。

确保您的动画状态也设置为 both，因此文本在开始时已隐藏，并在动画结束后保持可见。

编辑：

您还可以使用 JavaScript 来设置动画延迟，如下所示：

document.querySelectorAll('p.text').forEach((el, i) => el.style.animationDelay = `${i * 5}s`)