Using CSS to make a WarGames "List Games" animation

In the new splash/loading screen for my TiddlyWiki, I wanted a “List Games” animation like the one in WarGames, and I wanted to do it without JavaScript. Making a bunch of lines reveal themselves sequentially using just CSS is surprisingly hard to do! This CodePen demo shows how the thing will look once my wiki becomes bloated enough to allow the full animation to run while it’s loading, which I hope won’t be too soon for most people.

I used this clip from the movie as a reference for the typeface, color, glow, line spacing, and speed.

The craziest two things I learned were:

1. You have to set the p tag to visibility: hidden so that all the lines don’t appear the instant the page loads.
2. You have to set animation-fill-mode: forwards on each animation to get each visibility: visible to stick at the end (so the lines don’t disappear again when it’s all done running). 

Before this, I learned from Jack Baty that setting up a “loading” tiddler was even possible.

These two CodePen demos were very important in getting a grasp on how to do it:

• Typing animation using CSS
• CSS Typing Multiple Lines with Blinking Caret

And here’s all the other CSS animation stuff I found and learned from today:

• CSS text-shadow property
• CSS text shadow opacity
• Understanding the CSS animation-fill-mode Property
• CSS visibility Property
• Keyframe Animation Syntax
• The Difference Between :nth-child and :nth-of-type
• How to Use steps() in CSS Animations
• How to animate width and height 100% using css3 animations?