Demonstrating a neon tubing typographic effect to my 1st year students last week, I realized that I had neglected to animate it as promised… so here it is.
The base code of this example is very similar to the previous article: an embedded font, use of text-shadow, and a background-image:
h1#neon-tubing {
padding: 6rem;
text-align: center;
color: rgba(255,200,200,0.8);
font-family: Neon80s, sans-serif;
font-size: 11rem;
letter-spacing: 2rem;
background: url(brick-wall-texture-faded.jpg);
background-size: cover;
}There are two primary differences: a single letter of the neon sign is contained within a span element:
<h1 id="neon-tubing">B<span>A</span>R</h1>… and there is a CSS keyframe animation sequence (shown sans vendor prefixes to save on space):
@keyframes neonspark {
0% {
text-shadow: none;
}
30% {
text-shadow: 0 0 30px rgba(255,0,84,0.6);
}
60% {
text-shadow: 0 0 30px rgba(255,0,84,0.6),
0 0 60px rgba(255,0,84,0.4);
}
80% {
text-shadow: none;
}
100% {
text-shadow: 0 0 30px rgba(255,0,84,0.6),
0 0 60px rgba(255,0,84,0.4),
0 0 100px rgba(255,0,84,0.2),
0 0 90px rgba(255,0,84,0.1);
}
}The sequence is simple, merely adding and removing a text-shadow to the letters. The trick is that both the <h1> element and the <span> use the keyframes in different ways:
h1#neon-tubing {
animation: neonspark 1s 3s forwards;
}
h1#neon-tubing span {
animation: neonspark 4s 3s infinite;
}The final effect is that the sign as a whole flickers into life once (as the default behaviour is for CSS animations to execute a single time) but the <span> element uses the same sequence repeatedly, flickering the "A" in the bar sign on and off forever.
This example goes some way towards showing the flexibility and reusability of CSS keyframes: much like object-oriented classes, well-planned keyframes can be applied to multiple elements in different ways on your web pages.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/xJkhG
