Flicker In
L’élément s’allume par de brefs clignotements d’opacité, comme une enseigne néon défectueuse, avant de rester visible.
Usages
Effets de texte néon et rétro
Prompt
Remplacez [où] par la partie de votre page, puis collez le prompt dans votre agent IA. Chaque prompt contient le nom de l’animation : la prochaine fois, il vous suffira de la demander par son nom.
Ajoute une animation d’entrée « Flicker In » sur [où].
L’élément doit s’allumer et s’éteindre quelques fois à intervalles irréguliers, comme une enseigne néon défectueuse, avant de rester allumé : des flashs nets, sans déplacement.
Joue-la une seule fois, avec peu de flashs et assez lents pour ne pas gêner les personnes sensibles aux lumières clignotantes, et affiche-le allumé en continu si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).Animations similaires
ABC
Flicker
Aussi appelée Flickering
L’opacité de l’élément vacille de façon irrégulière, comme une lampe défaillante.
Usages
Effets néon et glitch
Ajoute un effet « Flicker » (aussi appelé flickering) sur [où].
L’élément doit rester stable la plupart du temps et baisser d’intensité par brefs à-coups irréguliers, comme un néon défaillant.
Garde un rythme irrégulier plutôt que régulier, évite les flashs rapides à pleine intensité, et arrête-le si l’utilisateur a activé la réduction des animations.Flash
Aussi appelée Blink
L’élément clignote en faisant varier rapidement son opacité.
Usages
Signaler un nouveau contenu
Ajoute un effet d’attention « Flash » (aussi appelé blink) sur [où].
L’élément doit clignoter en disparaissant puis réapparaissant rapidement deux fois, puis rester entièrement visible.
Joue-le une seule fois plutôt qu’en clignotement sans fin, et désactive-le si l’utilisateur a activé la réduction des animations, car un clignotement rapide peut être gênant.ABCDEF
Neon Glow Text
Aussi appelée Neon Sign Flicker, Glowing Text
Le texte brille comme un tube néon et clignote ou pulse.
Usages
Thèmes vie nocturne et gaming
Ajoute un effet « Neon Glow Text » (aussi appelé neon sign flicker ou glowing text) sur [où].
Le texte doit briller comme un tube néon, d’une lumière douce et régulière, et de temps en temps s’éteindre brièvement comme une vraie enseigne.
Garde le clignotement occasionnel plutôt que rapide, car les flashs rapides peuvent nuire à certains utilisateurs, et garde la lueur fixe si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).A
Fade In / Fade Out (fondu)
Aussi appelée Fade
L’élément passe sur place de totalement transparent à totalement opaque, ou l’inverse quand il disparaît.
Usages
Modales, toasts et contenu de page qui apparaît
Ajoute une animation de fondu (Fade In / Fade Out) sur [où], aussi appelée fade.
L’élément doit passer sur place de totalement transparent à totalement visible quand il apparaît, et disparaître en fondu de la même façon quand il s’en va : doux, sans déplacement ni changement d’échelle.
Une fois disparu, assure-toi qu’il ne soit plus cliquable ni accessible au clavier, et bascule instantanément si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).Autres animations : Entrance & Exit
A
L’élément fait un tour complet autour de l’axe Y en s’approchant légèrement du spectateur puis en revenant.
Usages
Révélation d’une carte ou d’un badge qui attire l’attention
Ajoute une animation « Flip » sur [où].
L’élément doit faire un tour complet autour de son axe vertical en s’approchant légèrement du spectateur, puis revenir avec une infime baisse de taille : vif mais bref.
Donne-lui de la perspective pour que la rotation se lise en profondeur, joue-la une seule fois plutôt qu’en boucle, et supprime la rotation si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).A
Flip In
Aussi appelée Flip In X, Flip In Y
L’élément pivote en 3D autour de son axe horizontal ou vertical, de la tranche jusqu’à faire face au spectateur.
Usages
Révélation de cartes et de tuiles
Ajoute une animation d’entrée « Flip In » (aussi appelée flip in X ou flip in Y) sur [où].
L’élément doit partir de la tranche et pivoter autour de son axe horizontal pour faire face au spectateur, en dépassant légèrement puis en revenant avant de se stabiliser : rapide, avec une petite oscillation.
Donne-lui de la perspective pour que la rotation se lise en profondeur, et affiche-le de face sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).A
Flip Out
Aussi appelée Flip Out X, Flip Out Y
L’élément pivote en 3D jusqu’à être vu par la tranche et devenir invisible.
Usages
Suppression de cartes et de tuiles
Ajoute une animation de sortie « Flip Out » (aussi appelée flip out X ou flip out Y) sur [où].
L’élément doit s’incliner légèrement vers l’arrière, puis pivoter autour de son axe vertical jusqu’à être vu par la tranche et disparaître : rapide et net.
Donne-lui de la perspective pour que la rotation se lise en profondeur, retire l’élément seulement à la fin de la rotation, et masque-le immédiatement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).