Opens in a new tab

Category: Interaction

  • A card in its final position with two faint dashed outlines just below it, showing it moved up 16px as it faded in.

    September 29, 2026
    When an element slides in from far away, like a card flying up from the bottom of the screen, people…
  • Two rows of a card moving right in steps. The row using left has uneven gaps, labeled stutters. The row using translate has even gaps, labeled smooth.

    September 29, 2026
    Some CSS properties are much easier for the browser to animate than others. When you animate properties like width, height,…
  • Two identical cards with a cursor over each. The clickable card lifts with a shadow, while the card that is not clickable stays flat.

    September 29, 2026
    Hover interactions are the key way you tell visitors that an element is clickable. People have learned it from years…

Get Free Design Lessons Every Monday Morning

Three short lessons each Monday on a single design topic. They're written in plain language and give you ideas to use on your next site.

You're in!

Check your inbox for your first email.
Close