Video: What Yogi Bear taught me about CSS animation
What do Yogi Bear cartoons and CSS animations have in common? More than you think. In this video, I show how low-budget animation techniques from Hanna-Barbera cartoons—like background loops, talking heads, and minimal movement—can inspire expressive, lightweight web animations using only CSS and SVG.
Transcript
Animations have come a long way in CSS. From basic hovers and transitions to full keyframe animations and scroll-linked effects. But even with those updates, CSS animation is still pretty simple. And honestly? That’s what makes it charming. It reminds me of the Hanna-Barbera cartoons I grew up with. Yogi Bear, Dastardly & Muttley, Penelope Pitstop, Wacky Races. You get the idea.
Those cartoons had tiny budgets. So, the animators got clever. They reused backgrounds, looped movements, and layered elements to create the illusion of motion. Like this scene from "Home Sweet Jellystone" where a postman rides across the screen. He doesn’t move—the background scrolls behind him. I recreated this with CSS. One element, a repeating background image, and a simple keyframe animation. That’s it. No JavaScript needed.
So how does this relate to Mike Worth’s website? One scene features Mike’s mascot, Orango Jones, driving across the screen. To make the jeep bounce, I used a second keyframe animation that changes the image’s position. It's lo-fi, but it adds personality.
Like the old animators, I reused elements to build layered scenes. Trees, rocks, and foregrounds scroll at different speeds to create depth. This layering trick is also great for parallax effects. It adds realism without adding bloat. Characters in Hanna-Barbera cartoons didn’t move much. Their bodies stayed still—only their mouths and eyes changed. In SVG, I did the same thing. I grouped the static parts and swapped out the mouths frame by frame using CSS animations. Six frames. One looping timeline.
Animations aren’t just decoration. They tell stories. Mike’s 404 page? His orangutan adventurer is sinking into quicksand while animated bubbles rise around him. And it’s all done in CSS. Animations can also be subtle. Like on Mike’s about page, where shafts of light move slowly across a stone tablet. They add atmosphere and depth without being distracting.
I also used CSS for interaction. On Mike’s review page, a red button toggles the desk lamp. When it turns off, the lights dim, and Orango Jones gets grumpy. And yes—there’s a vibrating crystal skull. It hints at a hidden Easter egg.
Just like Hanna-Barbera turned limitations into a visual style, CSS animations let us build expressive, lightweight experiences. For Mike Worth’s site, animation wasn’t just an add-on. It was part of the story. It made the site feel alive.
So next time you reach for an animation, think beyond movement. Think about mood, identity, and imagination.