Animations et micro-interactions CSS fluides et accessibles

Prompt

Agis comme un développeur frontend spécialisé dans le motion design web, la performance des animations et l'accessibilité.

Contexte :
- Ce que je veux animer : {{element}}
- Sensation recherchée : {{sensation}}
- Technologie : {{technologie}}
- Contraintes du projet : {{contraintes}}

Si l'interaction n'est pas claire (déclencheur, durée, possibilité de l'interrompre), pose-moi la question avant d'écrire du code.

Livrables :
1. Une spécification du mouvement en tableau : déclencheur, propriétés qui changent, durée, courbe d'accélération, délai et état final, cohérente avec une sensation {{sensation}}.
2. Des variables CSS pour les durées et les courbes, réutilisables dans tout le projet.
3. Le HTML et le CSS (et le JavaScript minimal si {{technologie}} l'exige), en n'animant que transform et opacity autant que possible.
4. Une alternative prefers-reduced-motion : ce qui est supprimé, ce qui devient un simple fondu et ce qui reste parce qu'il porte une information.
5. Des états de focus visibles et un comportement clavier correct si l'élément est interactif ; l'animation ne doit jamais masquer le focus ni retarder la réponse.
6. Des notes de performance : quand utiliser will-change et quand le retirer, éviter les propriétés qui déclenchent un recalcul de mise en page, et comment le vérifier dans le panneau Performance.
7. Le comportement dans les navigateurs qui ne prennent pas en charge une API utilisée, pour que le contenu reste utilisable.

Contraintes :
- Aucune animation qui clignote plus de trois fois par seconde, ni de mouvement automatique de plus de cinq secondes sans moyen de le mettre en pause.
- Pas de bibliothèque externe sauf si {{technologie}} le demande.
- Le contenu doit rester visible et utilisable même si l'animation ne s'exécute pas.

Format : tableau de spécification, blocs de code par fichier et liste de tests.

Comment l'utiliser

Exemple d'utilisation

Exemple de résultat

:root {
  --duree-rapide: 150ms;
  --duree-base: 300ms;
  --courbe-sortie: cubic-bezier(0.2, 0, 0, 1);
}

/* Masqué seulement si le JS est chargé : sans JS, le contenu reste visible */
.js .carte-produit {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duree-base) var(--courbe-sortie), transform var(--duree-base) var(--courbe-sortie);
}
.js .carte-produit.est-visible { opacity: 1; transform: none; }

.bouton-panier { transition: transform var(--duree-rapide) var(--courbe-sortie); }
.bouton-panier:active { transform: scale(0.97); }
.bouton-panier:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.bouton-panier[data-etat="ajoute"] .icone-check { animation: apparaitre var(--duree-base) var(--courbe-sortie); }

@keyframes apparaitre { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .carte-produit { transform: none; transition: opacity var(--duree-rapide) linear; }
  .bouton-panier, .bouton-panier[data-etat="ajoute"] .icone-check { transition: none; animation: none; }
}

Informations clés

Catégorie

Programmation et développement · HTML et CSS

Type de résultat

Code

Niveau

Intermédiaire

Conçu pour

ChatGPT, Claude, Gemini et Microsoft Copilot

Vérifié sur

En attente de vérification éditoriale

Variables

Ce que je veux animer, Sensation recherchée, Technologie et Contraintes

Langue

Français

Prix

Gratuit, sans inscription

Mis à jour

07/11/2026

Questions fréquentes