Kinetic Typography
Animation CSS pure — chaque lettre alterne graisse, couleur et déplacement vertical avec un stagger de 0,2 s par caractère. Zéro JavaScript.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Texte comprend 56 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le texte est découpé en <span class="vf-kinetic-char"> placés dans un .vf-kinetic-line en display:flex. Chaque span reçoit un animation-delay croissant (0 s, 0,2 s, 0,4 s…) en attribut style inline — c'est ce décalage qui crée le stagger lettre par lettre, sans aucune logique JavaScript.
La keyframe vfKinetic alterne quatre états toutes les 3 s (ease-in-out, infinite) en faisant varier simultanément trois propriétés CSS : font-weight (800 → 300 → 900 → 400), color (#8b5cf6 → #ec4899 → #06b6d4 → #f59e0b) et transform (translateY ±8 px + scaleY 0,9–1,2). Chaque lettre étant en phase différente, l'œil perçoit un désordre contrôlé alors que chaque animation individuelle reste parfaitement régulière.
L'interpolation de font-weight n'est fluide qu'avec une police variable supportant l'axe wght. Inter (utilisé par défaut) satisfait ce critère. Avec une police non variable, le navigateur saute aux graisses disponibles (400, 700…) au lieu d'interpoler.
Le overflow: hidden sur .vf-kinetic-line empêche les lettres de déborder verticalement lors du scaleY(1,2) — à désactiver si la hauteur du conteneur est fixe et que vous souhaitez laisser l'effet respirer au-delà des bords.
Accessibilité
- prefers-reduced-motion absent du code : les animations tournent sans condition. Pour respecter la préférence OS, ajoutez
@media (prefers-reduced-motion: reduce) { .vf-kinetic-char { animation: none; } }. - Les
<span>sont du texte natif — les lecteurs d'écran lisent le mot entier sans perturbation ; l'animation est transparente pour eux. - Aucun élément focusable dans la structure : pas de piège clavier.
- La variation de couleur ne porte pas d'information sémantique ; le texte reste lisible dans tous les états de la keyframe.
- Contraste WCAG AA vérifié sur fond sombre (#0a0a0f) : violet #8b5cf6 (≈ 4,9:1), rose #ec4899 (≈ 5,9:1), cyan #06b6d4 (≈ 8,6:1), ambre #f59e0b (≈ 9,8:1) — tous passent pour du texte de grande taille (≥ 18 pt).
Compatibilité navigateur
CSS pur, zéro dépendance. L'animation font-weight nécessite une police variable (axe wght) pour une interpolation fluide.
Sans support des animations CSS, les lettres s'affichent avec leur style de base (graisse 800, couleur #8b5cf6). Aucune erreur JS, le texte reste lisible.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="vf-kinetic-scene">
<div class="vf-kinetic-line" id="vfKineticText">
<span class="vf-kinetic-char" style="animation-delay:0s">K</span>
<span class="vf-kinetic-char" style="animation-delay:0.2s">I</span>
<span class="vf-kinetic-char" style="animation-delay:0.4s">N</span>
<!-- … une <span> par lettre … -->
</div>
<span class="vf-kinetic-sub">weight + transform + color</span>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| animation-duration (sur .vf-kinetic-char) | 3s | Durée d'un cycle complet. 1,5 s = nerveux et rapide, 5 s = lent et contemplatif. |
| animation-delay (inline par span) | 0, 0.2s, 0.4s… | Stagger entre lettres. Réduisez à 0,08 s pour un effet quasi-simultané ; augmentez à 0,4 s pour une vague lente. |
| font-size (sur .vf-kinetic-char) | 2.2rem | Taille des lettres. 1,4 rem pour un label discret, 5 rem pour un titre héros plein écran. |
| font-family (sur .vf-kinetic-char) | Inter | Police. Doit être une police variable (axe wght) pour l'interpolation fluide — Inter, Plus Jakarta Sans, DM Sans, Manrope. |
| Couleurs dans @keyframes vfKinetic (0%, 25%, 50%, 75%) | #8b5cf6, #ec4899, #06b6d4, #f59e0b | Les 4 couleurs traversées par les lettres. Alignez-les sur votre palette brand. |
| font-weight dans @keyframes vfKinetic | 800, 300, 900, 400 | Les 4 graisses alternées (100–900 par multiples de 100). Réduisez l'écart (ex. 500–700) pour un effet plus subtil. |
| translateY dans @keyframes vfKinetic | 0, -8px, 0, 4px | Déplacement vertical de chaque lettre. ±16 px pour plus de rebond, ±2 px pour un effet très discret. |
| scaleY dans @keyframes vfKinetic | 1, 1.2, 0.9, 1.1 | Étirement vertical. Passez à 1 à tous les stops pour désactiver la déformation et garder uniquement graisse + couleur. |
FAQ
Array.from(el.textContent).forEach((c,i) => { const s = document.createElement('span'); s.className = 'vf-kinetic-char'; s.style.animationDelay = i * 0.2 + 's'; s.textContent = c; el.appendChild(s); }); — videz d'abord le conteneur (el.innerHTML = '') puis lancez cette boucle.font-weight n'est fluide qu'avec une police variable supportant l'axe wght. Sans cela, le navigateur saute aux graisses disponibles (400, 700…). Chargez Inter avec font-weight: 100 900 via Google Fonts ou auto-hébergez une police variable pour retrouver la transition lisse.animation-play-state : document.querySelectorAll('.vf-kinetic-char').forEach(s => s.style.animationPlayState = 'paused') pour geler, remplacez par 'running' pour reprendre. Aucune autre modification n'est nécessaire.
