Créez une animation de saisie basée sur CSS pour chaque ligne d'une séquence

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);
      }
    }
  }

Ce que je veux faire, c'est afficher du texte à l'utilisateur avec une animation de saisie ici, ligne par ligne, de haut en bas. J'ai essayé de nombreuses façons mais rien sauf pour chaque élément p.text 元素定义不同的 keyframe 之外，我找不到其他解决方案。这样我的代码就变成了意大利面条，因为有 17 个 p.text. que dois-je faire?

Voici le lien codepen pour cette question : https://codepen.io/mehmetguduk/pen/RwJqzpN

Answer 1

Vous devez appliquer manuellement un délai à chaque ligne. Pour SCSS, un exemple d'extrait de code pour ce faire consiste à utiliser une boucle @for puis à multiplier l'index par la durée de l'animation.

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

Bien sûr, cela nécessitera quelques ajustements supplémentaires pour obtenir un timing parfait, mais devrait vous donner une idée approximative de la façon de résoudre ce problème.

Assurez-vous que l'état de votre animation est également défini sur both, afin que le texte soit masqué au début et reste visible une fois l'animation terminée.

Éditeur :

Vous pouvez également utiliser JavaScript pour définir les délais d'animation comme suit :

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