{"id":1085,"date":"2025-05-07T08:00:00","date_gmt":"2025-05-07T08:00:00","guid":{"rendered":"http:\/\/sobre-portugal.com\/?p=1085"},"modified":"2025-05-07T20:23:45","modified_gmt":"2025-05-07T20:23:45","slug":"smashing-animations-part-1-how-classic-cartoons-inspire-modern-css","status":"publish","type":"post","link":"http:\/\/sobre-portugal.com\/index.php\/2025\/05\/07\/smashing-animations-part-1-how-classic-cartoons-inspire-modern-css\/","title":{"rendered":"Smashing Animations Part 1: How Classic Cartoons Inspire Modern CSS"},"content":{"rendered":"<p>              <title>Smashing Animations Part 1: How Classic Cartoons Inspire Modern CSS<\/title><\/p>\n<article>\n<header>\n<h1>Smashing Animations Part 1: How Classic Cartoons Inspire Modern CSS<\/h1>\n<address>Andy Clarke<\/address>\n<p>                  2025-05-07T08:00:00+00:00<br \/>\n                  2025-05-07T20:02:52+00:00<br \/>\n                <\/header>\n<p>Browser makers didn\u2019t take long to add the movement capabilities to CSS. The simple <code>:hover<\/code> pseudo-class came first, and a bit later, the <code>transition<\/code>s between two states. Then came the ability to change states across a set of <code>@keyframes<\/code> and, most recently, scroll-driven animations that link keyframes to the scroll position.<\/p>\n<p>Even with these added capabilities, <strong>CSS animations have remained relatively rudimentary<\/strong>. They remind me of the <a href=\"https:\/\/en.wikipedia.org\/wiki\/Hanna-Barbera\">Hanna-Barbera<\/a> animated series I grew up watching on TV.<\/p>\n<p>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.<\/p>\n<p>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.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/3-yogi-bear-show.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"450\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/3-yogi-bear-show.png\" alt=\"The Yogi Bear Show illustration\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/3-yogi-bear-show.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>The simple and efficient techniques developed by Hanna-Barbera\u2019s 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\u2019t resort to JavaScript; they can use CSS to change an element\u2019s <code>opacity<\/code>, <code>position<\/code>, and <code>visibility<\/code>. But what are some reasons for doing this?<\/p>\n<p>Animations bring static experiences to life. They can <strong>improve usability<\/strong> by guiding people\u2019s 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.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/4-andy-clarke-design.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"550\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/4-andy-clarke-design.png\" alt=\"Design by Andy Clarke of Mike Worth\u2019s website\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Design by Andy Clarke, Stuff &amp; Nonsense. Mike Worth\u2019s website will launch in June 2025, but you can see examples from this article on CodePen. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/4-andy-clarke-design.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<div data-audience=\"non-subscriber\" data-remove=\"true\" class=\"feature-panel-container\">\n<aside class=\"feature-panel\">\n<div class=\"feature-panel-left-col\">\n<div class=\"feature-panel-description\">\n<p>Meet <strong><a data-instant href=\"https:\/\/www.smashingconf.com\/online-workshops\/\">Smashing Workshops<\/a><\/strong> on <strong>front-end, design &amp; UX<\/strong>, with practical takeaways, live sessions, <strong>video recordings<\/strong> and a friendly Q&amp;A. With Brad Frost, St\u00e9ph Walter and <a href=\"https:\/\/smashingconf.com\/online-workshops\/workshops\">so many others<\/a>.<\/p>\n<p><a data-instant href=\"smashing-workshops\" class=\"btn btn--green btn--large\">Jump to the workshops&nbsp;\u21ac<\/a><\/div>\n<\/div>\n<div class=\"feature-panel-right-col\"><a data-instant href=\"smashing-workshops\" class=\"feature-panel-image-link\"><\/p>\n<div class=\"feature-panel-image\">\n<img decoding=\"async\" loading=\"lazy\" class=\"feature-panel-image-img\" src=\"\/images\/smashing-cat\/cat-scubadiving-panel.svg\" alt=\"Feature Panel\" width=\"257\" height=\"355\" \/><\/p>\n<\/div>\n<p><\/a>\n<\/div>\n<\/aside>\n<\/div>\n<h2 id=\"introducing-mike-worth\">Introducing Mike Worth<\/h2>\n<p>I\u2019ve 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.<\/p>\n<p>Mike loves \u201980s and \u201990s animation &mdash; especially Disney\u2019s <a href=\"https:\/\/en.wikipedia.org\/wiki\/DuckTales_(1987_TV_series)\"><em>Duck Tales<\/em><\/a>. Unsurprisingly, my taste in cartoons stretches back a little further to the 1960s <a href=\"https:\/\/en.wikipedia.org\/wiki\/Hanna-Barbera\">Hanna-Barbera<\/a> shows like Dastardly and Muttley in <em>Their Flying Machines<\/em>, <em>Scooby-Doo<\/em>, <em>The Perils of Penelope Pitstop<\/em>, <em>Wacky Races<\/em>, and, of course, <a href=\"https:\/\/en.wikipedia.org\/wiki\/Yogi_Bear\">Yogi Bear<\/a>.<\/p>\n<p>So, to explain how this era of animation relates to CSS, I\u2019ve chosen an episode of <em>The Yogi Bear Show<\/em>, \u201c<a href=\"https:\/\/www.youtube.com\/watch?v=CPnmzcmKgA0\">Home Sweet Jellystone<\/a>,\u201d first broadcast in 1961. In this story, Ranger Smith inherits a mansion and (spoiler alert) leaves Jellystone.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/5-yogi-bear-show-home-sweet-jellystone.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"450\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/5-yogi-bear-show-home-sweet-jellystone.png\" alt=\"The Yogi Bear Show. An illustration from \u201cHome Sweet Jellystone episode\u201d\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/5-yogi-bear-show-home-sweet-jellystone.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h2 id=\"dissecting-movement\">Dissecting Movement<\/h2>\n<p>In this episode, Hanna-Barbera\u2019s 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.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/6-yogi-bear-show-author-recreation.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"450\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/6-yogi-bear-show-author-recreation.png\" alt=\"The Yogi Bear Show, author\u2019s recreation of dissecting movement\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. (Author\u2019s recreation) (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/6-yogi-bear-show-author-recreation.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>The background loops when a scene lasts longer than a single pan of Robert Gentle\u2019s landscape painting, with bushes and trees appearing repeatedly.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/7-yogi-bear-dissecting-movement.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"80\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/7-yogi-bear-dissecting-movement.png\" alt=\"A closer look at the landscape painting, with bushes and trees appearing repeatedly\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/7-yogi-bear-dissecting-movement.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>This can be recreated using a single element and an animation that changes the position of its background image:<\/p>\n<pre><code class=\"language-css\">@keyframes background-scroll {\n  0% { background-position: 2750px 0; }\n  100% { background-position: 0 0; }\n}\n\ndiv {\n  overflow: hidden;\n  width: 100vw;\n  height: 540px;\n  background-image: url(\"\u2026\");\n  background-size: 2750px 540px;\n  background-repeat: repeat-x;\n  animation: background-scroll 5s linear infinite;\n}\n<\/code><\/pre>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"NPPzgyq\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Yogi Bear background image scroll [forked]](https:\/\/codepen.io\/smashingmag\/pen\/NPPzgyq) by <a href=\"https:\/\/codepen.io\/malarkey\">Andy Clarke<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/NPPzgyq\">Yogi Bear background image scroll [forked]<\/a> by <a href=\"https:\/\/codepen.io\/malarkey\">Andy Clarke<\/a>.<\/figcaption><\/figure>\n<p>Although beautifully executed, Robert Gentle\u2019s background paintings were often remarkably simple. The mansion\u2019s interior background rushes past to create the illusion of Ranger Smith dashing across it, so it needed very few details.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/8-robert-gentle-background-painting.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"314\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/8-robert-gentle-background-painting.png\" alt=\"The mansion\u2019s interior background\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/8-robert-gentle-background-painting.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p><strong>The economy of movement<\/strong> was essential for producing these animated shorts cheaply and efficiently. The postman\u2019s motorcycle bounces, and only his head position and facial expressions change, which adds a subtle hint of realism.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/9-yogi-bear-sequence-shortened.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"131\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/9-yogi-bear-sequence-shortened.png\" alt=\"An example of several drawings where only head position and facial expressions change to add movement on a motorcycle\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. Sequence shortened. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/9-yogi-bear-sequence-shortened.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Likewise, only Ranger Smith\u2019s facial expression and leg positions change throughout his walk cycle as he dashes through his mansion. The rest of his body stays static.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/10-yogi-bear-sequence-shortened.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"131\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/10-yogi-bear-sequence-shortened.png\" alt=\"An example of several drawings where only Ranger Smith\u2019s facial expression and leg positions change during a walk\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. Sequence shortened. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/10-yogi-bear-sequence-shortened.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>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.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/11-mike-worth-website.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"400\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/11-mike-worth-website.png\" alt=\"An illustration from Mike Worth\u2019s website\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Mike Worth\u2019s website will launch in June 2025, but you can see examples from this article on CodePen. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/11-mike-worth-website.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>I drew directly from <strong>Hanna-Barbera\u2019s bouncing and scrolling technique<\/strong> for this scene by using two keyframe animations: <code>background-scroll<\/code> and <code>bumpy-ride<\/code>. The infinitely scrolling background works just like before:<\/p>\n<pre><code class=\"language-css\">@keyframes background-scroll {\n  0% { background-position: 960px 0; }\n  100% { background-position: 0 0; }\n}\n<\/code><\/pre>\n<p>I created the appearance of his bumpy ride by animating changes to the keyframes\u2019 <code>translate<\/code> values:<\/p>\n<pre><code class=\"language-css\">@keyframes bumpy-ride {\n  0% { translate: 0 0; }\n  10% { translate: 0 -5px; }\n  20% { translate: 0 3px; }\n  30% { translate: 0 -3px; }\n  40% { translate: 0 5px; }\n  50% { translate: 0 -10px; }\n  60% { translate: 0 4px; }\n  70% { translate: 0 -2px; }\n  80% { translate: 0 7px; }\n  90% { translate: 0 -4px; }\n  100% { translate: 0 0; }\n}\n\nfigure {\n  \/&#042; ... &#042;\/\n  animation: background-scroll 5s linear infinite;\n}\n\nimg {\n  \/&#042; ... &#042;\/\n  animation: bumpy-ride 1.5s infinite ease-in-out;\n}\n<\/code><\/pre>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"ByyVZrB\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Mike Worth background image scroll [forked]](https:\/\/codepen.io\/smashingmag\/pen\/ByyVZrB) by <a href=\"https:\/\/codepen.io\/malarkey\">Andy Clarke<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/ByyVZrB\">Mike Worth background image scroll [forked]<\/a> by <a href=\"https:\/\/codepen.io\/malarkey\">Andy Clarke<\/a>.<\/figcaption><\/figure>\n<p>As Michelle Barker wrote about <a href=\"https:\/\/www.smashingmagazine.com\/2021\/10\/respecting-users-motion-preferences\/\">here at Smashing Magazine<\/a> back in 2021:<\/p>\n<blockquote><p>\u201cWhen working with motion on the web, it\u2019s important to consider that not everyone experiences it the same way. What might feel smooth and slick to some might be annoying or distracting to others &mdash; or worse, induce feelings of sickness or even cause seizures.\u201d<\/p>\n<p>&mdash; Michelle Barker<\/p><\/blockquote>\n<p>You can prevent that from happening by turning off animations when someone has chosen reduced motion in their browser by using the <code>prefers-reduced-motion<\/code> media query:<\/p>\n<pre><code class=\"language-css\">@media (prefers-reduced-motion: reduce) {\n  &#042; { animation: none !important; }\n}\n<\/code><\/pre>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"reusing-elements\">Reusing Elements<\/h2>\n<p>Since each episode\u2019s budget and production time were limited, William Hanna and Joseph Barbera created a streamlined process for producing their animations. They used as few as 2,000 individual drawings and just a few background paintings per episode, often reusing them on several episodes.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/12-yogi-bear-background-painting.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"322\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/12-yogi-bear-background-painting.png\" alt=\"A background painting with highlighted trees from the Yogi Bear show\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/12-yogi-bear-background-painting.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Watch the episode and you\u2019ll see these trees appear over and over again throughout \u201cHome Sweet Jellystone.\u201d Behind Yogi and Boo-Boo on the track, in the bushes, and scaled up in this close-up of Boo-Boo:<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/1-yogi-bear-show-reusing-elements.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"196\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/1-yogi-bear-show-reusing-elements.png\" alt=\"The Yogi Bear Show paintings with the same trees\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/1-yogi-bear-show-reusing-elements.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>The animators also frequently <strong>layered foreground elements onto these background paintings<\/strong> to create a variety of new scenes:<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/2-layered-foreground-elements.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"293\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/2-layered-foreground-elements.png\" alt=\"The Yogi Bear Show paintings with layered foreground elements\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      On the left: The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. On the right: Author\u2019s edit.(<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/2-layered-foreground-elements.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>In my deleted scene from Mike Worth\u2019s website, I introduced these rocks into the foreground to add depth to the animation:<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/13-layered-foreground-elements.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"400\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/13-layered-foreground-elements.png\" alt=\"Painting from Mike Worth\u2019s website with rocks on the background\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Mike Worth\u2019s website will launch in June 2025, but you can see examples from this article on CodePen. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/13-layered-foreground-elements.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>If I were using bitmap images, this would require just one additional image:<\/p>\n<pre><code class=\"language-html\">&lt;figure&gt;\n  &lt;img id=\"bumpy-ride\" src=\"...\" alt=\"\" \/&gt;\n  &lt;img id=\"apes-rock\" src=\"...\" alt=\"\" \/&gt;\n&lt;\/figure&gt;\n<\/code><\/pre>\n<pre><code class=\"language-css\">figure {\n  position: relative; \n\n  #bumpy-ride { ... }\n\n  #apes-rock {\n    position: absolute;\n    width: 960px;\n    left: calc(50% - 480px);\n    bottom: 0;\n  }\n}\n<\/code><\/pre>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"xbbzraj\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Mike Worth layered animation [forked]](https:\/\/codepen.io\/smashingmag\/pen\/xbbzraj) by <a href=\"https:\/\/codepen.io\/malarkey\">Andy Clarke<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/xbbzraj\">Mike Worth layered animation [forked]<\/a> by <a href=\"https:\/\/codepen.io\/malarkey\">Andy Clarke<\/a>.<\/figcaption><\/figure>\n<p>Had I continued developing this scene, I might\u2019ve added a slower scrolling animation to those rocks to introduce a parallax effect for even greater realism.<\/p>\n<h2 id=\"looping-frames-create-movement\">Looping Frames Create Movement<\/h2>\n<p>To meet their limited budget and production schedules, Hanna Barbera\u2019s animators carefully planned their animations and cleverly <strong>only animated specific elements<\/strong>. While heads and facial expressions make characters talk and their legs change to make them walk, most characters\u2019 bodies remain relatively static. So, throughout this entire scene of Ranger Smith walking and talking his way across his cabin, only his face and legs are animated:<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/14-looping-frames.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"157\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/14-looping-frames.png\" alt=\"Looping Frames of Ranger Smith walking, where only his face and legs are animated\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/14-looping-frames.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Likewise, when the ranger reads his telegram, only his eyes and mouth move:<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/15-looping-frames-movement.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"400\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/15-looping-frames-movement.png\" alt=\"Looping Frames of Ranger Smith reading a telegram\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/15-looping-frames-movement.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>If you\u2019ve wondered why both Ranger Smith and Yogi Bear wear collars and neckties, it\u2019s so the line between their animated heads and faces and static bodies is obscured:<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/16-yogi-bear.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"600\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/16-yogi-bear.png\" alt=\"Yogi Bear wearing a collar\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. Author\u2019s recreation. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/16-yogi-bear.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<blockquote class=\"pull-quote\">\n<p>\n    <a class=\"pull-quote__link\" aria-label=\"Share on Twitter\" href=\"https:\/\/twitter.com\/share?text=%0aSVG%20delivers%20incredible%20performance%20and%20also%20offers%20fantastic%20flexibility%20when%20animating%20elements.%20The%20ability%20to%20embed%20one%20SVG%20inside%20another%20and%20to%20manipulate%20groups%20and%20other%20elements%20using%20CSS%20makes%20it%20ideal%20for%20animations.%0a&amp;url=https:\/\/smashingmagazine.com%2f2025%2f05%2fsmashing-animations-part-1-classic-cartoons-inspire-css%2f\"><\/p>\n<p>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.<\/p>\n<p>    <\/a>\n  <\/p>\n<div class=\"pull-quote__quotation\">\n<div class=\"pull-quote__bg\">\n      <span class=\"pull-quote__symbol\">\u201c<\/span><\/div>\n<\/p><\/div>\n<\/blockquote>\n<p>I replicated how Hanna-Barbera made Ranger Smith and other characters\u2019 mouths move by first including a group that contains the ranger\u2019s body and head, which remain static throughout. Then, I added six more groups, each containing one frame of his mouth moving:<\/p>\n<pre><code class=\"language-svg\">&lt;svg&gt;\n  &lt;!-- static elements --&gt;\n  &lt;g&gt;...&lt;\/g&gt;\n\n  &lt;!-- animation frames --&gt;\n  &lt;g class=\"frame-1\"&gt;...&lt;\/g&gt;\n  &lt;g class=\"frame-2\"&gt;...&lt;\/g&gt;\n  &lt;g class=\"frame-3\"&gt;...&lt;\/g&gt;\n  &lt;g class=\"frame-4\"&gt;...&lt;\/g&gt;\n  &lt;g class=\"frame-5\"&gt;...&lt;\/g&gt;\n  &lt;g class=\"frame-6\"&gt;...&lt;\/g&gt;\n&lt;\/svg&gt;\n<\/code><\/pre>\n<p>I used CSS custom properties to define the speed at which characters\u2019 mouths move and how many frames are in the animation:<\/p>\n<pre><code class=\"language-css\">:root {\n  --animation-duration: 1s;\n  --frame-count: 6;\n}\n<\/code><\/pre>\n<p>Then, I applied a keyframe animation to show and hide each frame:<\/p>\n<pre><code class=\"language-css\">@keyframes ranger-talking {\n  0% { visibility: visible; }\n  16.67% { visibility: hidden; }\n  100% { visibility: hidden; }\n}\n\n[class&#042;=\"frame\"] {\n  visibility: hidden;\n  animation: ranger-talking var(--animation-duration) infinite;\n}\n<\/code><\/pre>\n<p>Before finally setting a delay, which makes each frame visible at the correct time:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">.frame-1 {\n  animation-delay: calc(var(--animation-duration) &#042; 0 \/ var(--frame-count));\n}\n\n\/&#042; ... &#042;\/\n\n.frame-6 {\n  animation-delay: calc(var(--animation-duration) &#042; 5 \/ var(--frame-count));\n}\n<\/code><\/pre>\n<\/div>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"QwwxgJE\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Ranger Smith talking [forked]](https:\/\/codepen.io\/smashingmag\/pen\/QwwxgJE) by <a href=\"https:\/\/codepen.io\/malarkey\">Andy Clarke<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/QwwxgJE\">Ranger Smith talking [forked]<\/a> by <a href=\"https:\/\/codepen.io\/malarkey\">Andy Clarke<\/a>.<\/figcaption><\/figure>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"working-with-mike-worth\">Working With Mike Worth<\/h2>\n<p>When Mike Worth and I sat down to discuss working together, we both understood that there would be neither the budget nor the time to create a short animated cartoon for his website. We also knew that video would be the correct format for a fully animated production, but we were keen to explore how CSS could bring what would\u2019ve otherwise been static images to life. So, this begs the question of <em>why<\/em> and <em>when<\/em> to use CSS animations.<\/p>\n<h3 id=\"ambient-animations\">Ambient Animations<\/h3>\n<blockquote><p>Subtle ambient animations contribute to a website\u2019s atmosphere and help with storytelling without distracting from its content or functionality.<\/p><\/blockquote>\n<p>For Mike Worth\u2019s about-page illustration, I shone shafts of light onto a stone tablet to add depth to an otherwise flat image. Inside my SVG, I added a <code>path<\/code> for the light and reduced its <code>opacity<\/code> to <code>.25<\/code>:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-svg\">&lt;svg&gt;\n  &lt;!-- ... --&gt;\n  &lt;path class=\"light-shaft\" fill=\"#F1DCA9\" opacity=\".25\" d=\"\"\/&gt;\n&lt;\/svg&gt;\n<\/code><\/pre>\n<\/div>\n<p>I then defined an SVG filter to blur the edges of my light shafts and linked it to my <code>path<\/code>:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-svg\">&lt;defs&gt;\n  &lt;filter id=\"light-shaft\" width=\"100%\" height=\"100%\" x=\"0\" y=\"0\" filterUnits=\"objectBoundingBox\"&gt;\n  &lt;feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"20\"\/&gt;\n  &lt;\/filter&gt;\n&lt;\/defs&gt;\n\n&lt;svg&gt;\n  &lt;!-- ... --&gt;\n  &lt;path class=\"light-shaft\" filter=\"url(#light-shaft)\" \u2026 \/&gt;\n&lt;\/svg&gt;\n<\/code><\/pre>\n<\/div>\n<p>Finally, I added a subtle ambient animation that rotates the light shafts and creates a more natural feel:<\/p>\n<pre><code class=\"language-css\">@keyframes shaft-rotate {\n  0% { rotate: 2deg; }\n  50% { rotate: -2deg; }\n  100% { rotate: 2deg; }\n}\n\n.light-shaft {\n  animation: shaft-rotate 20s infinite;\n  transform-origin: 100% 0;\n}\n<\/code><\/pre>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"bNNKROE\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Mike Worth\u2019s about page animation [forked]](https:\/\/codepen.io\/smashingmag\/pen\/bNNKROE) by <a href=\"https:\/\/codepen.io\/malarkey\">Andy Clarke<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/bNNKROE\">Mike Worth\u2019s about page animation [forked]<\/a> by <a href=\"https:\/\/codepen.io\/malarkey\">Andy Clarke<\/a>.<\/figcaption><\/figure>\n<p>Can you throw more light on Mike\u2019s navigation?<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"ZYYRyVJ\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Light up Mike Worth about page [forked]](https:\/\/codepen.io\/smashingmag\/pen\/ZYYRyVJ) by <a href=\"https:\/\/codepen.io\/malarkey\">Andy Clarke<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/ZYYRyVJ\">Light up Mike Worth about page [forked]<\/a> by <a href=\"https:\/\/codepen.io\/malarkey\">Andy Clarke<\/a>.<\/figcaption><\/figure>\n<h3 id=\"animations-on-interactions\">Animations On Interactions<\/h3>\n<blockquote><p>In the same way that a <code>:hover<\/code> pseudo-class provides valuable visual feedback when someone interacts with an element, CSS animations can create a deeper connection between people and a design.<\/p><\/blockquote>\n<p>I included an Easter egg interaction on Mike Worth\u2019s review page illustration. The big red button turns the desk lamp on and off, much to the consternation of Mike\u2019s orangutan mascot, who\u2019s trying to study his map. To implement this, I applied a <code>data-<\/code> attribute to the SVG illustration:<\/p>\n<pre><code class=\"language-svg\">&lt;svg \u2026 data-lights=\"lights-on\"&gt;\n  &lt;!-- ... --&gt;\n&lt;\/svg&gt;\n<\/code><\/pre>\n<p>And added a red button for any curious visitor to press:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-html\">&lt;a href=\"javascript:void(0);\" id=\"light-switch\" title=\"Lights on\/off\"&gt;\n  &lt;path fill=\"#0a0908\" d=\"...\"\/&gt;\n  &lt;ellipse fill=\"#9c1621\" \u2026 \/&gt;\n  &lt;path fill=\"#fff\" d=\"...\"\/&gt;\n&lt;\/a&gt;\n<\/code><\/pre>\n<\/div>\n<p>When someone presses that red button, the light goes out, which is made possible by changing the value of the SVG\u2019s <code>data-<\/code> attribute from <code>lights-on<\/code> to <code>lights-off<\/code>.<\/p>\n<p>Several elements within the illustration light up when the desk lamp is on. To make this happen, I applied a class value to those specific items:<\/p>\n<pre><code class=\"language-svg\">&lt;path class=\"lamp-glow\" \/&gt;\n<\/code><\/pre>\n<p>And used the data-attribute value to toggle the glow on and off when someone presses the lamp\u2019s button:<\/p>\n<pre><code class=\"language-css\">[data-lights=\"lights-on\"] .lamp-glow {\n  opacity: 1;\n  transition: opacity .25s linear;\n}\n\n[data-lights=\"lights-off\"] .lamp-glow {\n  opacity: .25;\n  transition: opacity .25s linear;\n}\n<\/code><\/pre>\n<p>When someone turns the lamp on, it flickers at what appears to be random intervals. I first applied a class value to the flickering elements:<\/p>\n<pre><code class=\"language-svg\">&lt;path class=\"lamp-flicker\" \/&gt;\n<\/code><\/pre>\n<p>Then, I hid them when the lamp was turned off:<\/p>\n<pre><code class=\"language-css\">[data-lights=\"lights-off\"] .lamp-flicker {\n  visibility: hidden;\n}\n<\/code><\/pre>\n<p>Finally, I created a keyframe animation that flickers the lamp light\u2019s <code>opacity<\/code> at seemingly random intervals:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">@keyframes lamp-flicker {\n  0%, 19.9%, 22%, 62.9%, 64%, 64.9%, 70%, 100% { opacity: 1; }\n  20%, 21.9%, 63%, 63.9%, 65%, 69.9% { opacity: .5; }\n}\n\n[data-lights=\"lights-on\"] .lamp-flicker {\n  animation: lamp-flicker 3s 3s linear infinite;\n}\n<\/code><\/pre>\n<\/div>\n<p>Animations can also tempt people to venture deeper into a design, so I made the crystal skull on the desk vibrate to hint at something more to discover:<\/p>\n<pre><code class=\"language-html\">&lt;a href=\"\/easter-egg\"&gt;\n  &lt;g id=\"crystal-skull\"&gt;...&lt;\/g&gt;\n&lt;\/a&gt;\n<\/code><\/pre>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">@keyframes crystal-skull-vibrate {\n  0% { translate: 0 0; }\n  20% { translate: -2px 2px; }\n  40% { translate: -2px -2px; }\n  60% { translate: 2px 2px; }\n  80% { translate: 2px -2px; }\n  100% { translate: 0 0; }\n}\n\n&#035;crystal-skull:hover {\n  animation: crystal-skull-vibrate .5s ease 0s infinite normal forwards;\n}\n<\/code><\/pre>\n<\/div>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"YPPvQBg\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Mike Worth\u2019s review page animation [forked]](https:\/\/codepen.io\/smashingmag\/pen\/YPPvQBg) by <a href=\"https:\/\/codepen.io\/malarkey\">Andy Clarke<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/YPPvQBg\">Mike Worth\u2019s review page animation [forked]<\/a> by <a href=\"https:\/\/codepen.io\/malarkey\">Andy Clarke<\/a>.<\/figcaption><\/figure>\n<h3 id=\"animations-tell-stories\">Animations Tell Stories<\/h3>\n<blockquote><p>When carefully considered, animations can reflect a brand\u2019s identity and help tell its story.<\/p><\/blockquote>\n<p>Mike Worth\u2019s brand is high-energy &mdash; just like his personality &mdash; and the story he tells about his work as a video game composer is engaging and playful. Mike wanted every interaction with his website to bring his personality to the screen.<\/p>\n<p>Should someone get lost along their journey, they\u2019ll end up on Mike\u2019s 404 page, where his hero has a sinking feeling. While Mike\u2019s orangutan adventurer slips deeper and deeper into the quicksand, animated bubbles rise:<\/p>\n<pre><code class=\"language-svg\">&lt;g&gt;\n  &lt;circle class=\"four-oh-dear-bubble\" ... \/&gt;\n  &lt;circle class=\"four-oh-dear-bubble\" ... \/&gt;\n  &lt;circle class=\"four-oh-dear-bubble\" ... \/&gt;\n  &lt;!-- ... --&gt;\n&lt;\/g&gt;\n<\/code><\/pre>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">@keyframes four-oh-dear-bubbles {\n  0% { \n    animation-timing-function: ease-in; \n    opacity: 1; \n    transform: translateY(45px);\n  }\n  24% { \n    opacity: 1; \n  }\n  40% { \n    animation-timing-function: ease-in; \n    translate: 0 24px;\n  }\n  65% { \n    animation-timing-function: ease-in;\n    translate: 0 12px;\n  }\n  82% { \n    animation-timing-function: ease-in;\n    translate: 0 6px;\n  }\n  93% { \n    animation-timing-function: ease-in;\n    translate: 0 4px;\n  }\n  25%, 55%, 75%, 87% { \n    animation-timing-function: ease-out;\n    translate: 0 0;\n  }\n  100% { \n    animation-timing-function: ease-out;\n    opacity: 1; \n    translate: 0 0;\n  }\n}\n\n.four-oh-dear-bubble {\n  animation: four-oh-dear-bubbles 2s ease 0s infinite alternate forwards; }\n<\/code><\/pre>\n<\/div>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"ZYYRyPX\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Mike Worth\u2019s 404 page animation [forked]](https:\/\/codepen.io\/smashingmag\/pen\/ZYYRyPX) by <a href=\"https:\/\/codepen.io\/malarkey\">Andy Clarke<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/ZYYRyPX\">Mike Worth\u2019s 404 page animation [forked]<\/a> by <a href=\"https:\/\/codepen.io\/malarkey\">Andy Clarke<\/a>.<\/figcaption><\/figure>\n<h2 id=\"bringing-it-all-to-life\">Bringing It All To Life<\/h2>\n<p>Just as the animators at Hanna-Barbera turned technical limitations into their signature style, CSS animations enable web professionals to craft characterful experiences. By layering elements, looping frames, and applying subtle movement, you can inject personality into a design while improving someone\u2019s experience.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/17-yogi-bear.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"450\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/17-yogi-bear.png\" alt=\"Yogi Bear\u2019s painting\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/17-yogi-bear.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>In my design for Mike Worth\u2019s website, <strong>animation isn\u2019t just for decoration; it tells a compelling story about him and his work<\/strong>. Every movement reflects his brand identity and makes his website an extension of his creative world.<\/p>\n<blockquote class=\"pull-quote\">\n<p>\n    <a class=\"pull-quote__link\" aria-label=\"Share on Twitter\" href=\"https:\/\/twitter.com\/share?text=%0aThink%20beyond%20movement%20the%20next%20time%20you%20reach%20for%20a%20CSS%20animation.%20Consider%20emotions,%20identity,%20and%20mood,%20too.%20After%20all,%20a%20well-considered%20animation%20can%20do%20more%20than%20catch%20someone%e2%80%99s%20eye.%20It%20can%20capture%20their%20imagination.%0a&amp;url=https:\/\/smashingmagazine.com%2f2025%2f05%2fsmashing-animations-part-1-classic-cartoons-inspire-css%2f\"><\/p>\n<p>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\u2019s eye. It can capture their imagination.<\/p>\n<p>    <\/a>\n  <\/p>\n<div class=\"pull-quote__quotation\">\n<div class=\"pull-quote__bg\">\n      <span class=\"pull-quote__symbol\">\u201c<\/span><\/div>\n<\/p><\/div>\n<\/blockquote>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/18-the-end-painting.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"450\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/18-the-end-painting.png\" alt=\"The end painting\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-1-classic-cartoons-inspire-css\/18-the-end-painting.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Mike Worth\u2019s website will launch in June 2025, but you can <a href=\"https:\/\/codepen.io\/collection\/YwMKPb\">see examples from this article on CodePen<\/a> now.<\/p>\n<div class=\"signature\">\n  <img decoding=\"async\" src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" \/><br \/>\n  <span>(gg, yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Smashing Animations Part 1: How Classic Cartoons Inspire Modern CSS Smashing Animations Part 1: How Classic Cartoons Inspire Modern CSS Andy Clarke 2025-05-07T08:00:00+00:00 2025-05-07T20:02:52+00:00 Browser makers didn\u2019t take long to<\/p>\n<p class=\"more-link\"><a href=\"http:\/\/sobre-portugal.com\/index.php\/2025\/05\/07\/smashing-animations-part-1-how-classic-cartoons-inspire-modern-css\/\" class=\"readmore\">Continue reading<svg class=\"icon icon-arrow-right\" aria-hidden=\"true\" role=\"img\"> <use href=\"#icon-arrow-right\" xlink:href=\"#icon-arrow-right\"><\/use> <\/svg><span class=\"screen-reader-text\">Smashing Animations Part 1: How Classic Cartoons Inspire Modern CSS<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-1085","post","type-post","status-publish","format-standard","hentry","category-css"],"_links":{"self":[{"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/posts\/1085","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/comments?post=1085"}],"version-history":[{"count":1,"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/posts\/1085\/revisions"}],"predecessor-version":[{"id":1086,"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/posts\/1085\/revisions\/1086"}],"wp:attachment":[{"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/media?parent=1085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/categories?post=1085"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/tags?post=1085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}