I love the fact that CSS is finally reclaiming control over visual interactions, taking charge of the styling, the animation, and the accessibility exactly as it should. Today, native browser capabilities allow us to move the heavy lifting away from the JavaScript main thread and closer to the GPU. By letting the browser’s engine optimize performance under the hood, we save energy and processing power while building code that is robust, accessible, and independent of external libraries that might deprecate tomorrow.

We have 3D, modern layout techniques, clip-paths, transforms, custom properties, scroll-driven animations, view-transitions, @property — and we can animate almost anything, even to auto-height!

And, of course, there’s SVG, which isn’t new, but allows us to build entire websites through illustrations and animations. Take the example below: it’s responsive, lightweight, accessible, and powered primarily by CSS Grid + SVG.

We can even build an entire video game including the UI using only SVG:

What follows is not a complete guide to modern CSS, but an opinionated selection of techniques I reach for when I want a site to feel alive and be remembered. There are many ways to create memorable experiences. Sometimes it’s as simple as a form that completes smoothly. But here I’m interested in the expressive end of the spectrum.

Motion as Communication: Defining Your Intent

Before we dive into the technical side, I want to clarify something: we shouldn’t move things just because we can.

Everything communicates, and our animations are no exception. We must take the time to design movements that support the message we want to convey in order to keep our intents tightly scoped without overdoing it.

Here’s a methodology I use when planning the design and animation of a site.

Imagine we’re working on a project for a nature event focused on mushrooms. The design language changes completely depending on the “vibe”: selling a “Psychedelic Mushroom Rave” is worlds apart from a “Spiritual Mushroom Retreat” focused on ancestral medicine.

Every design decision communicates. I like to create what I call keyword lists to define my intent and scope. For example, I might break things down into different options:

Option A: The Psychedelic Event

• Visuals: Colorful, saturated, high-contrast, illustrations, distortions
• Movement: Fast, frantic, unpredictable, morphing, rhythmic, synced loops, hypnotic
• Feeling: Fun, chaotic, energetic, stimulating, surprising
• Typography: Funk, “psych-rock”
• Style References: Pop Art, 60s/70s op art, rave flyers
• Actions: Dancing
• Extras: Emojis, films (e.g., Fear and Loathing in Las Vegas)

Option B: The Spiritual Retreat

• Visuals: Earth tones, neutral tones, de-saturated, photograph-heavy, nature, whitespace
• Movement: Slow, fluid, organic, breathing, subtle parallax, smooth scrolling.
• Feeling: Calm, serene, introspective, contemplative, safe
• Typography: Elegant Serif, minimalist sans-serif, wide spacing, legible
• Style References: Scandinavian design, Japanese Wabi-sabi, wellness/spa aesthetics, botanical books
• Actions: Breathing
• Extras: Healing sounds, film (e.g., Eat Pray Love)

This is the kind of exercise I do to guide my design and animation decisions. The lists will help me select everything from which CSS properties I plan to use and how to use them. I even share them with the client and, together, we choose a direction.

Let’s say we go with Option A and look at a few examples of what I think are essential ingredients for creating memorable user experiences.

Split Text Animations

These animations became popular thanks to the GSAP SplitText plugin. It splits text by character (or words, or lines if you like) so we can create interesting text effects, like staggered animations.

  H
  O
  L
  A

This approach wraps each letter in “Hola” in a span. From there, each span is inline-styled with a custom property indexing the spans in order. Which is something that will get a lot easier when the sibling-index() function gains broad browser support.

But for now, each custom property value acts as a multiplier that increases an animation-delay, staggering each span. In this case we fade in each character as it moves up.

.reveal-text span {
  animation: slideUp 0.6s ease-out forwards;
  animation-delay: calc(var(--i) * 0.1s);
  display: inline-block;
  opacity: 0;
  transform: translateY(3rem);
}

@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Accessibility is the tricky part here. The instinct is to hide all the individual spans from assistive technology with aria-hidden="true" and add a visually hidden version of the full word for screen readers:

  HOLA
  
    H
    O
    L
    A
  

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

But be warned: this pattern doesn’t guarantee a good experience across all screen readers. Adrian Roselli tested GSAP’s SplitText across eight screen reader and browser combinations and found it only worked correctly in two of them. If you ship this technique, test it with real assistive technology.

If that risk feels too high, there’s a very clever alternative from Preethi worth knowing that uses the letter-spacing property. It accepts negative values that collapse characters on top of each other, hiding them without touching the DOM at all. Animate it back to 0 and you get a similar reveal effect without accessibility overhead.

What would be great is a pseudo-selector like ::nth-letter to target individual glyphs directly from CSS the way ::first-letter selects the first character. But unfortunately, there’s no ::nth-letter… at least yet.

Remember to respect the user’s motion preferences on every animation:

@media (prefers-reduced-motion: reduce) {
  .reveal-text span {
    animation: none; /* or a softer animation */
  }
}

And here we go:

It might not scale too much when we have a lot of text and different animations we want to apply. For the psychedelic event, I wanted to try splitting text with SMIL, but it was verbose. This is the code for animating two letters alone:

Add role="img" and a