Jello

L’élément s’étire en largeur et s’écrase en hauteur par à-coups élastiques avant de reprendre sa forme normale.

Ajoute un effet d’attention « Rubber Band » (aussi appelé rubberband) sur [où].
L’élément doit s’étirer en largeur et s’écraser en hauteur, puis revenir par quelques petits rebonds élastiques avant de se stabiliser à sa taille normale.
Joue-le une fois au déclenchement et empêche la mise en page autour de se décaler pendant qu’il s’étire.

L’élément oscille de gauche à droite en s’inclinant, comme un objet instable.

Ajoute un effet d’attention « Wobble » sur [où].
L’élément doit osciller de gauche à droite en s’inclinant, avec un grand balancement au départ qui diminue à chaque aller-retour jusqu’à s’immobiliser.
Joue-le une fois au déclenchement et empêche le contenu voisin de se décaler.

L’élément s’incline de biais au survol.

Ajoute un effet au survol « Skew » sur [où].
L’élément doit s’incliner de biais jusqu’à une légère inclinaison tant que le pointeur est dessus, puis se redresser quand il sort : rapide et fluide.
Garde le texte lisible pendant l’inclinaison, évite que la mise en page autour ne bouge et applique le même effet au focus clavier.

L’élément oscille de gauche à droite avec une légère rotation, comme une tête qui fait non.

Ajoute un effet d’attention « Head Shake » (aussi appelé headshake ou no shake) sur [où].
L’élément doit pivoter rapidement de gauche à droite avec une légère torsion, comme une tête qui fait non, chaque mouvement plus petit que le précédent jusqu’à s’immobiliser.
Joue-le une fois à chaque déclenchement, par exemple lors d’une action refusée, et empêche la mise en page autour de bouger.

Une copie de l’élément s’agrandit et s’estompe en boucle, comme une onde de radar.

Ajoute un effet « Ping » (aussi appelé radar ping ou pulse ring) sur [où].
Une copie de l’élément doit s’agrandir vers l’extérieur et s’estomper, encore et encore à un rythme régulier, pendant que l’élément lui-même reste immobile.
Dessine l’anneau sur un calque séparé pour qu’il ne modifie jamais la mise en page, et arrête la boucle si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément grossit ou s’estompe doucement, puis revient, de façon répétée.

Ajoute un effet « Pulse » (aussi appelé pulsing) sur [où].
L’élément doit gonfler doucement puis revenir selon un rythme lent et régulier : discret, sans rebond.
Fais-le tourner en boucle sans coupure sans décaler la mise en page autour, et arrête-le si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).