i was planning to build a scramble-the-image game today but got distracted learning @starting-style for the entry animations. ended up spending the whole hour just making color swatches bounce in and shuffle around. it’s still fun! and i learned something new.

the web tech

@starting-style

@starting-style is a CSS at-rule that lets you define the initial styles for an element before it transitions to its final state:

.color-swatch {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  @starting-style {
    opacity: 0;
    transform: scale(0) rotate(180deg);
  }
}

when the element first renders, it starts with the @starting-style values (invisible, tiny, rotated), then automatically transitions to the normal styles. each swatch gets a staggered transition-delay so they pop in one by one.

{/* TODO: add a fun gif/video of the swatches animating in here */}

the scramble

when you click the scramble button, i use Fisher-Yates shuffle to randomize the DOM elements, then re-append them to the grid. CSS Grid handles the layout, and the transition property makes them slide smoothly. there’s also a little rotation wiggle during scramble for extra juice.

things i learned

• @starting-style landed in stable browsers in late 2024/early 2025 (caniuse)
• cubic-bezier(0.34, 1.56, 0.64, 1) gives a nice elastic bounce
• open props made grabbing vibrant color swatches super easy with their design tokens
• CSS Grid auto-reflow when re-appending elements is way easier than calculating positions manually

smooth, declarative entry animations used to need requestAnimationFrame tricks or intersection observer. now you just declare starting and ending states and CSS handles the transition automatically.