Browser makers didn’t take long to add the movement capabilities to CSS. The simple :hover pseudo-class came first, and a bit later, the transitions between two states. Then came the ability to change states across a set of @keyframes and, most recently, scroll-driven animations that link keyframes to the scroll position.
Even with these added capabilities, CSS animations have remained relatively rudimentary. They remind me of the Hanna-Barbera animated series I grew up watching on TV.
These animated shorts lacked the budgets given to live-action or animated movies. They were also far lower than those available when William Hanna and Joseph Barbera made Tom and Jerry shorts while working for MGM Cartoons. This meant the animators needed to develop techniques to work around their cost restrictions and the technical limitations of the time.
They used fewer frames per second and far fewer cells. Instead of using a different image for each frame, they repeated each one several times. They reused cells as frequently as possible by zooming and overlaying additional elements to construct a new scene. They kept bodies mainly static and overlayed eyes, mouths, and legs to create the illusion of talking and walking. Instead of reducing the quality of these cartoons, these constraints created a charm often lacking in more recent, bigger-budget, and technically advanced productions.
The simple and efficient techniques developed by Hanna-Barbera’s animators can be implemented using CSS. Modern layout tools allow web developers to layer elements. Scaleable Vector Graphics (SVG) can contain several frames, and developers needn’t resort to JavaScript; they can use CSS to change an element’s opacity, position, and visibility. But what are some reasons for doing this?
Animations bring static experiences to life. They can improve usability by guiding people’s actions and delighting or surprising them when interacting with a design. When carefully considered, animations can reinforce branding and help tell stories about a brand.
Introducing Mike Worth
I’ve recently been working on a new website for Emmy-award-winning game composer Mike Worth. He hired me to create a bold, retro-style design that showcases his work. I used CSS animations throughout to delight and surprise his audience as they move through his website.
Mike loves ’80s and ’90s animation — especially Disney’s Duck Tales). Unsurprisingly, my taste in cartoons stretches back a little further to the 1960s Hanna-Barbera shows like Dastardly and Muttley in Their Flying Machines, Scooby-Doo, The Perils of Penelope Pitstop, Wacky Races, and, of course, Yogi Bear.
So, to explain how this era of animation relates to CSS, I’ve chosen an episode of The Yogi Bear Show, “Home Sweet Jellystone,” first broadcast in 1961. In this story, Ranger Smith inherits a mansion and (spoiler alert) leaves Jellystone.
Dissecting Movement
In this episode, Hanna-Barbera’s techniques become apparent as soon as a postman arrives with a telegram for Ranger Smith. The camera pans sideways across a landscape painting by background artist Robert Gentle to create the illusion that the postman is moving.
The background loops when a scene lasts longer than a single pan of Robert Gentle’s landscape painting, with bushes and trees appearing repeatedly.
This can be recreated using a single element and an animation that changes the position of its background image:
@keyframes background-scroll {
0% { background-position: 2750px 0; }
100% { background-position: 0 0; }
}
div {
overflow: hidden;
width: 100vw;
height: 540px;
background-image: url("…");
background-size: 2750px 540px;
background-repeat: repeat-x;
animation: background-scroll 5s linear infinite;
}
The economy of movement was essential for producing these animated shorts cheaply and efficiently. The postman’s motorcycle bounces, and only his head position and facial expressions change, which adds a subtle hint of realism.
Likewise, only Ranger Smith’s facial expression and leg positions change throughout his walk cycle as he dashes through his mansion. The rest of his body stays static.
In a discarded scene from my design for his website, the orangutan adventurer mascot I created for Mike Worth can be seen driving across the landscape.
I drew directly from Hanna-Barbera’s bouncing and scrolling technique for this scene by using two keyframe animations: background-scroll and bumpy-ride. The infinitely scrolling background works just like before:
@keyframes background-scroll {
0% { background-position: 960px 0; }
100% { background-position: 0 0; }
}
I created the appearance of his bumpy ride by animating changes to the keyframes’ translate values:
@keyframes bumpy-ride {
0% { translate: 0 0; }
10% { translate: 0 -5px; }
20% { translate: 0 3px; }
30% { translate: 0 -3px; }
40% { translate: 0 5px; }
50% { translate: 0 -10px; }
60% { translate: 0 4px; }
70% { translate: 0 -2px; }
80% { translate: 0 7px; }
90% { translate: 0 -4px; }
100% { translate: 0 0; }
}
figure {
/* ... */
animation: background-scroll 5s linear infinite;
}
img {
/* ... */
animation: bumpy-ride 1.5s infinite ease-in-out;
}
Watch the episode and you’ll see these trees appear over and over again throughout “Home Sweet Jellystone.” Behind Yogi and Boo-Boo on the track, in the bushes, and scaled up in this close-up of Boo-Boo:
The animators also frequently layered foreground elements onto these background paintings to create a variety of new scenes:
In my deleted scene from Mike Worth’s website, I introduced these rocks into the foreground to add depth to the animation:
If I were using bitmap images, this would require just one additional image:
<figure>
<img id="bumpy-ride" src="..." alt="" />
<img id="apes-rock" src="..." alt="" />
</figure>
figure {
position: relative;
#bumpy-ride { ... }
#apes-rock {
position: absolute;
width: 960px;
left: calc(50% - 480px);
bottom: 0;
}
}
Likewise, when the ranger reads his telegram, only his eyes and mouth move:
If you’ve wondered why both Ranger Smith and Yogi Bear wear collars and neckties, it’s so the line between their animated heads and faces and static bodies is obscured:
SVG delivers incredible performance and also offers fantastic flexibility when animating elements. The ability to embed one SVG inside another and to manipulate groups and other elements using CSS makes it ideal for animations.
I replicated how Hanna-Barbera made Ranger Smith and other characters’ mouths move by first including a group that contains the ranger’s body and head, which remain static throughout. Then, I added six more groups, each containing one frame of his mouth moving:
<svg>
<!-- static elements -->
<g>...</g>
<!-- animation frames -->
<g class="frame-1">...</g>
<g class="frame-2">...</g>
<g class="frame-3">...</g>
<g class="frame-4">...</g>
<g class="frame-5">...</g>
<g class="frame-6">...</g>
</svg>
I used CSS custom properties to define the speed at which characters’ mouths move and how many frames are in the animation:
:root {
--animation-duration: 1s;
--frame-count: 6;
}
Then, I applied a keyframe animation to show and hide each frame:
@keyframes ranger-talking {
0% { visibility: visible; }
16.67% { visibility: hidden; }
100% { visibility: hidden; }
}
[class*="frame"] {
visibility: hidden;
animation: ranger-talking var(--animation-duration) infinite;
}
Before finally setting a delay, which makes each frame visible at the correct time:
.frame-1 {
animation-delay: calc(var(--animation-duration) * 0 / var(--frame-count));
}
/* ... */
.frame-6 {
animation-delay: calc(var(--animation-duration) * 5 / var(--frame-count));
}
In my design for Mike Worth’s website, animation isn’t just for decoration; it tells a compelling story about him and his work. Every movement reflects his brand identity and makes his website an extension of his creative world.
Think beyond movement the next time you reach for a CSS animation. Consider emotions, identity, and mood, too. After all, a well-considered animation can do more than catch someone’s eye. It can capture their imagination.
Mike Worth’s website will launch in June 2025, but you can see examples from this article on CodePen now.
Source: Read MoreÂ
