managing-animations
Creates and manages CSS and JavaScript animations (keyframes, transitions, sprite animations, canvas animations). Use when adding visual animations or user feedback
- Category: discovered
- Tags: github, community
- Version: 1.0.0
- Author: walid
- Downloads: 0
- GitHub stars: 1
- Updated: 2025-11-21
Download the latest version (v1.0.0) from this page.
SKILL.md
--- name: managing-animations description: Creates and manages CSS and JavaScript animations (keyframes, transitions, sprite animations, canvas animations). Use when adding visual animations or user feedback allowed-tools: Read, Write, Grep, Glob, Bash --- # Système d'Animation Crée animations fluides (CSS, JS, sprites, particules) pour feedback utilisateur et jeux. ## Table des matières - [Quand utiliser](#quand-utiliser) - [Types d'animations](#types-danimations) - [Patterns essentiels](#patterns-essentiels) - [Optimisations](#optimisations) - [Workflow](#workflow) - [Checklist](#checklist) - [En cas de doute](#en-cas-de-doute) ## Quand utiliser - Feedback visuel (boutons, transitions) - Animations sprites (jeux arcade) - Transitions slides - Effets visuels (particules, explosions) - Micro-interactions UI - Animations canvas jeux ## Types d'animations **CSS Transitions :** - Hover, focus, state changes - Propriétés : transform, opacity (GPU), color, box-shadow - Easing : ease-out (UI), ease-in-out (transitions), linear (rotations) **CSS Keyframes :** - Pulse, shake, bounce, rotate, fade - Animations répétables sans événement - Trouve keyframes existantes dans CSS **JavaScript (requestAnimationFrame) :** - Animations complexes programmées - `performance.now()` → progress (0-1) → easing → interpolate - Batch multiple animations dans un RAF **Sprite Animations (Canvas) :** - Frame-based (FPS adaptatif) - Sprite sheets, frame index qui boucle - Directional sprites, callbacks (onLoop, onComplete) **Particle Systems :** - Effets visuels (explosions, étincelles) - Particle class (position, velocity, life, color) - Max 100 simultanées, object pooling, cleanup Examine animationen existantes dans le code. ## Patterns essentiels - **Feedback :** Correct (vert, pulse), Wrong (rouge, shake), Coins (trajectoires) - **Transitions slides :** TranslateX, fade, cleanup, historique - **Accessibility :** Respecter `prefers-reduced-motion`, fallback simple - **Easing :** Linear, Quad, Cubic, Elastic, Bounce (trouve dans utils) ## Optimisations **GPU Acceleration :** - Utiliser transform + opacity (pas left/top) - will-change: transform, opacity (retirer après) **Performance :** - Batch RAF multiple animations - Particules < 100 simultanées, cleanup chaque frame - 60 FPS obligatoire (profile DevTools) ## Workflow 1. **Choisir type :** CSS transition (simple), CSS keyframes (feedback), RAF (complexe), Sprite (jeu), Particles (effets) 2. **Examiner existant :** Patterns, conventions, optimisations 3. **Implémenter :** Suivre mêmes patterns, cleanup, 60 FPS 4. **Tester :** Fluide, prefers-reduced-motion OK, mobile OK ## Checklist - [ ] CSS pour animations simples - [ ] RAF pour animations complexes - [ ] transform + opacity (GPU) - [ ] prefers-reduced-motion respecté - [ ] Particules < 100, cleanup - [ ] Easing appropriée - [ ] 60 FPS maintenu - [ ] Testé mobile ## En cas de doute **Règles absolues :** 1. Examiner animations similaires dans code 2. Prioriser CSS (simplicité + perf) 3. JavaScript uniquement si nécessaire 4. Profile DevTools (60 FPS OBLIGATOIRE) 5. Toujours respecter prefers-reduced-motion **Références :** - CSS keyframes/transitions existantes - Feedback animations (coins, scores) - Slides transitions - Jeux arcade (sprites, particules) - Easing functions utils