Using CSS to make a WarGames "List Games" animation

Posted on Feb 25, 2019

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:

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