博客 / 列表

Andy Clarke - Smashing Animations Part 1: How Classic Cartoons Inspire Modern CSS

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 chan

animation , Css , Design

Andy Clarke - Smashing Animations Part 2: How CSS Masking Can Add An Extra Dimension

Despite keyframes and scroll-driven events, CSS animations have remained relatively rudimentary. As I wrote in Part 1, they remind me of the 1960s Hanna-Barbera animated series I grew up watching on

animation , Css , Design

Andy Clarke - Smashing Animations Part 3: SMIL’s Not Dead Baby, SMIL’s Not Dead

The SMIL specification was introduced by the W3C in 1998 for synchronizing multimedia. This was long before CSS animations or JavaScript-based animation libraries were available. It was built into S

animation , Css , Design , svg

Andy Clarke - Smashing Animations Part 4: Optimising SVGs

SVG animations take me back to the Hanna-Barbera cartoons I watched as a kid. Shows like Wacky Races, The Perils of Penelope Pitstop, and, of course, Yogi Bear. They inspired me to lovingly recreate

animation , Css , Design , svg

Andy Clarke - Ambient Animations In Web Design: Principles And Implementation (Part 1)

Unlike timeline-based animations, which tell stories across a sequence of events, or interaction animations that are triggered when someone touches something, ambient animations are the kind of pass

animation , Css , Design , svg

Andy Clarke - Smashing Animations Part 5: Building Adaptive SVGs With <symbol>, <use>, And CSS Media Queries

I’ve written quite a lot recently about how I prepare and optimise SVG code to use as static graphics or in animations. I love working with SVG, but there’s always been something about them that bug

animation , Css , Design , svg

Andy Clarke - Ambient Animations In Web Design: Practical Applications (Part 2)

First, a recap: Ambient animations are the kind of passive movements you might not notice at first. However, they bring a design to life in subtle ways. Elements might subtly transition between col

animation , Design , svg

Andy Clarke - Smashing Animations Part 6: Magnificent SVGs With <use> And CSS Custom Properties

SmashingConf Amsterdam 2026 SmashingConf Amsterdam 2026 How To Measure UX and Design Impact, 8h video + UX training SurveyJS: White-La

animation , Css , Design , svg

Andy Clarke - Smashing Animations Part 6: Magnificent SVGs With <use> And CSS Custom Properties

I explained recently how I use symbol, use, and CSS Media Queries to develop what I call adaptive SVGs. Symbols let us define an element once and then use it again and again, making SVG animations e

animation , Css , Design , svg

Andy Clarke - A Modern Designer’s Canvas

When I gave this talk a title, I called it “A Modern Designer’s Canvas,” because originally I was going to talk about the tools and processes that I use when I’m designing. But being a good designer

Community , workflow , Creativity , Inspiration

Andy Clarke - How To Encourage Better Client Participation In Responsive Design Projects

Last week at the fabulous Smashing Conference in Freiburg, I gave a new talk, one I’d written just a few hours prior. I chose not to use slides, but instead to speak about three things that I’m incr

workflow , Clients , Web Design , Design