cycle-atlas/.agents/skills/micro-interaction/references/css-recipes.md

CSS Micro-interaction Recipes

Modern CSS handles most UI motion with zero JavaScript, including enter/exit and display toggles. Baseline-available in current Chrome/Edge/Safari/Firefox (verify @starting-style and allow-discrete for your support floor; degrade to instant show/hide otherwise).

Enter animation on first render: @starting-style

@starting-style supplies the values an element transitions FROM the first time it renders (or becomes shown). Without it, there is no "previous" state to transition from, so newly-inserted elements snap in.

.menu {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
@starting-style {
  .menu { opacity: 0; transform: translateY(-8px); }
}

Animating to/from display:none: transition-behavior: allow-discrete

display and content-visibility are discrete properties — normally they flip instantly, killing exit animations. allow-discrete lets them flip at the correct moment (kept visible during exit, swapped at the end).

.drawer {
  transition:
    transform 0.25s ease,
    opacity 0.25s ease,
    display 0.25s allow-discrete; /* keep displayed through the exit */
}
.drawer[hidden] {            /* closed state */
  opacity: 0;
  transform: translateX(100%);
  display: none;
}
@starting-style {
  .drawer:not([hidden]) { opacity: 0; transform: translateX(100%); }
}

Shorthand alternative: transition-behavior: allow-discrete; applies to all discrete properties in the transition list.

Popover / dialog exit animation (top-layer)

Native popover and <dialog> live in the top layer via the overlay property, which is also discrete — animate it too:

[popover] {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.2s, transform 0.2s, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
}
[popover]:popover-open { opacity: 1; transform: scale(1); }
@starting-style {
  [popover]:popover-open { opacity: 0; transform: scale(0.95); }
}

This gives a fully CSS-driven open AND close animation for <button popovertarget> popovers with no JS.

Press / hover / focus feedback

.btn {
  transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.btn:hover  { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.06s; } /* snappy press */
.btn:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }

Use :focus-visible (not :focus) so keyboard users get a ring but mouse clicks don't.

Animated toggle / switch

.switch { width: 44px; height: 24px; border-radius: 999px; background: #cbd5e1;
  transition: background 0.2s ease; }
.switch[aria-checked="true"] { background: #22c55e; }
.switch::after {
  content: ""; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  transform: translateX(2px);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.switch[aria-checked="true"]::after { transform: translateX(22px); }

The cubic-bezier(0.34, 1.56, 0.64, 1) overshoot gives the knob a satisfying snap.

Loading spinner and pulse

@keyframes spin { to { transform: rotate(360deg); } }
.spinner { animation: spin 0.8s linear infinite; }

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.skeleton { animation: pulse 1.5s ease-in-out infinite; }

Animatable custom properties with @property

Plain CSS variables animate discretely. Register them with @property to give them a type so they interpolate smoothly — enables gradient angle, number counters, and themed motion.

@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.gradient-border {
  background: conic-gradient(from var(--angle), #6366f1, #ec4899, #6366f1);
  transition: --angle 0.4s ease;
}
.gradient-border:hover { --angle: 360deg; }

Accordion height (modern: interpolate-size)

Animating height: auto historically required JS measurement. With interpolate-size: allow-keywords, transitions to/from intrinsic sizes work:

:root { interpolate-size: allow-keywords; }
.accordion__panel {
  height: 0; overflow: hidden;
  transition: height 0.3s ease;
}
.accordion__panel[data-open] { height: auto; }

Fallback for unsupported browsers: animate grid-template-rows: 0fr -> 1fr on a wrapper.

Reduced motion (always include)

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Then selectively re-enable essential, low-motion feedback (e.g. opacity-only fades) inside the same query if needed. The principle: never remove feedback entirely, just remove large/spatial motion.