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، والانتقالات، والإطارات الرئيسية، وواجهات برمجة التطبيقات للحركة الحديثة. يُستخدم عند إضافة رسوم متحركة أو انتقالات أو تأثيرات تعتمد على التمرير أو عرض التحولات. يستخدم للرسوم المتحركة لـ CSS، والانتقال، والإطارات الرئيسية، وانتقالات العرض، والرسوم المتحركة التمريرية، والتحويل، وتفضيلات الحركة، والمخطط الزمني للرسوم المتحركة. المصدر: oakoss/agent-skills.