I think that my recent exploration of individual letter hover effects was always going to lead me down this path. Once I wrote the JS for sequentially applying a class to individual letters in a string with a flexible timer structure, the ideas just kept coming. It all starts with this:

See the Pen Sequential Letter Animation Starter Pen by Braad Martin (@BraadMartin) on CodePen.0

With that JS, designing the effect is as simple as setting this line of CSS:

.container span.active {
  /* Do something crazy */
}

Then you can change the timing of the effect simply by changing the variables in the JS:

duration = 400; // Set duration of the effect here
speed = 100; // Set animation speed through the letters here
infiniteLoop = false // Set whether animation should keep on triggering

There is a lot of potential here. I'm only starting to scratch the surface:

Example 1 - Rotating Letters

See the Pen Sequential Letter Animations - Rotating Letters by Braad Martin (@BraadMartin) on CodePen.0

Example 2 - Leaning Letters

See the Pen Sequential Letter Animations - Leaning Letters by Braad Martin (@BraadMartin) on CodePen.0

Example 3 - 3D Letters

See the Pen Sequential Letter Animations - 3D Letters by Braad Martin (@BraadMartin) on CodePen.0

Example 4 - Inset Letters

See the Pen Sequential Letter Animations - Inset Letters by Braad Martin (@BraadMartin) on CodePen.0

Too much fun!

-Braad