animations

# Animations Produces or reviews web animations that hit 60 fps (or 120 fps on high-refresh displays), respect user motion preferences, and use the cheapest tool for the job — CSS first, the Web Animations API for runtime control, Motion when you need spring physics, gestures, or shared-layout animations, React Three Fiber when the rendering model itself needs to be three-dimensional. > **This `SKILL.md` is a thin index.** Detailed rules live in > [`rules/*.md`](./rules) and load on demand. Worked recipes live in > [`references/recipes.md`](./references/recipes.md). Drop-in HTML/CSS > snippets live in [`templates/`](./templates). > **Web only.** This skill's mechanics are web (CSS, Motion, View > Transitions, Web Animations API). For **React Native / Expo** motion > (Reanimated, gesture-handler, Moti, Lottie, Rive), use the > [`animations-native`](../animations-native/SKILL.md) skill instead — > it reuses this skill's platform-agnostic > [brainstorm / verb→motion catalog](./rules/interaction-feedback.md). --- ## Core Bet **Animate `transform`, `opacity`, and `filter` only.** Those are the three properties the browser composites on the GPU without triggering layout or paint on the main thread. Anything else (`width`, `height`, `top`, `left`, `margin`, `padding`, `box-shadow`, …) goes through layout or paint and will jank. Full table in [`rules/safe-properties.md`](./rules/safe-properties.md). For properties that *seem* unanimatable — `height: auto`, `display: none`, lis...