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。