css-animation-patterns

CSS animations and transitions provide hardware-accelerated motion for web interfaces using keyframes, transitions, transforms, and modern scroll-driven and view transition APIs. Animate only composite properties (transform, opacity, filter) for smooth 60fps performance, and always respect prefers-reduced-motion.

The browser rendering pipeline has four stages: Style, Layout, Paint, and Composite. Animating composite-only properties skips Layout and Paint entirely, running on the GPU compositor thread. This is the single most important performance principle for CSS animation.

Modern CSS adds two powerful APIs: scroll-driven animations link keyframe progress to scroll position or element visibility instead of time, and the View Transitions API creates snapshot-based animated transitions between DOM states for both SPAs and MPAs.

CSS 動畫、轉場、關鍵影格和現代運動 API。新增動畫、轉場、滾動驅動效果或視圖轉場時使用。用於 css 動畫、過渡、關鍵影格、視圖轉場、滾動動畫、變換、運動偏好、動畫時間軸。 來源：oakoss/agent-skills。