Comment construire une animation CSS sans mémoriser @keyframes ?
@keyframes est la façon déclarative d'animer en CSS. Vous définissez quelques keyframes (0 %, 50 %, 100 % ou plus), vous donnez à chacune un ensemble de valeurs CSS (transform, opacity, color), et le navigateur interpole en douceur entre elles. Le résultat : un mouvement à 60 fps tout fluide, sans JavaScript.
Ici, vous disposez d'un éditeur visuel. Cliquez sur un preset (fade-in, slide, bounce, shake, pulse, spin) ou ajoutez vos propres keyframes. Chaque frame possède ses propres translate X/Y, scale, rotation, opacity et couleur. En dessous, une prévisualisation en direct se met à jour quand vous changez les paramètres.
Le panneau latéral règle les paramètres globaux : durée, easing, nombre d'itérations, direction (normal / alternate), fill-mode. Cliquez sur « Copier » et vous obtenez tout le CSS : un bloc `@keyframes` plus une classe avec `animation: ...`.
Mode d'emploi
- Cliquez sur un preset (fade-in, slide, bounce, pulse, spin) dans la galerie ci-dessous. Chacun fournit 2 à 5 keyframes prêtes.
- À droite, vous voyez la liste des keyframes (0 % / 50 % / 100 %, etc.). Cliquez sur une frame pour en modifier les propriétés.
- Curseurs : translate X/Y, scale (1 = original, 0,5 = petit, 2 = grand), rotate en degrés, opacity 0-1, couleur de fond.
- Durée (100-5000 ms), easing (linear, ease, cubic-bezier), itérations (1, infinite), direction (alternate = aller-retour).
- Copiez le CSS, collez-le dans une feuille de style et ajoutez la classe `.target` à votre élément. L'animation démarre automatiquement.
Quand ça aide
Les micro-interactions distinguent une UI premium d'une UI bon marché. Une animation de 200-400 ms au hover, au clic ou au reveal donne vie à un site :
- Fade-in au scroll. L'élément apparaît quand il entre dans le viewport, plus un léger translate vers le haut = du contenu qui « glisse à l'écran ».
- Pulse sur un bouton CTA. Un call-to-action qui pulse doucement attire l'œil sans agacer (`pulse` infinite, alternate).
- Shake sur une erreur de validation de formulaire. Le champ mot de passe tremble 300 ms en cas d'erreur = retour visuel clair.
- Bounce sur les notifications toast. Un petit rebond pendant que le toast glisse à l'écran.
- Loader spin. Le classique spinner pendant que vous attendez une réponse serveur (`spin` infinite linear).
- Menu mobile en slide-in. Le menu hamburger entre depuis la droite.
- Hero qui change de couleur. Le dégradé de fond parcourt les couleurs en boucle, donne le rendu premium des fintechs.
Pour des courbes d'easing personnalisées, voir le générateur cubic-bezier. Pour d'autres effets visuels, voir box-shadow et clip-path.