Blur Reveal
Animation CSS pure qui fait passer un texte de flou et invisible à net et lisible — durée, intensité du flou et easing entièrement réglables.
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
L'animation est pilotée intégralement par CSS via @keyframes blurReveal. L'état initial de .text-blur-reveal combine filter: blur(10px) et opacity: 0 — le texte est flou et invisible. Le keyframe to ramène ces deux valeurs à filter: blur(0) et opacity: 1. L'interpolation simultanée des deux propriétés produit l'impression d'un texte qui émerge progressivement du brouillard.
Le mot-clé forwards dans le raccourci animation est essentiel : il conserve l'état du dernier keyframe (blur(0), opacity: 1) une fois la durée écoulée. Sans lui, le navigateur remettrait instantanément le texte à son état de départ (blur(10px), opacity: 0) à la fin de l'animation.
Pour rejouer l'animation au clic, la technique standard en JS vanilla consiste à retirer la classe .text-blur-reveal, lire element.offsetWidth (force un reflow du navigateur), puis réappliquer la classe : le cycle recommence proprement depuis le keyframe 0. Aucune librairie n'est nécessaire — deux lignes suffisent.
Accessibilité
- prefers-reduced-motion absent : la version de base ne détecte pas la préférence système. Ajouter
@media (prefers-reduced-motion: reduce) { .text-blur-reveal { animation: none; filter: none; opacity: 1; } }pour afficher directement le texte net sans animation. - Le texte reste dans le DOM et dans l'arbre d'accessibilité pendant toute l'animation —
filteretopacityn'affectent pas la lecture par les lecteurs d'écran. opacity: 0en état initial masque le texte visuellement mais n'équivaut pas àvisibility: hiddennidisplay: none: le contenu est déjà accessible aux AT dès le chargement.- À l'état final (
filter: blur(0),opacity: 1), l'effet n'altère aucun ratio de contraste — WCAG AA dépend uniquement des couleurs choisies. - Si le bouton « Rejouer » est exposé à l'utilisateur, le câbler sur un
<button>natif focusable, pas sur undivcliquable — le clavier doit pouvoir déclencher la répétition.
Compatibilité navigateur
CSS filter: blur() et @keyframes supportés dans tous les navigateurs modernes. Zéro dépendance JS pour l'animation de base.
Sans support de <code>filter</code> (IE 11), l'animation conserve uniquement la transition d'opacité (0 → 1) — le texte fait un fondu entrant sans effet de flou. Sans <code>@keyframes</code> du tout, le texte reste invisible (<code>opacity: 0</code>) : ajouter <code>.text-blur-reveal { opacity: 1; animation: none; }</code> comme règle de repli pour protéger ce cas.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<!-- Texte unique -->
<span class="demo-text text-blur-reveal">Votre texte</span>
</div>
<!-- Plusieurs lignes avec décalage échelonné -->
<div class="demo-preview">
<span class="demo-text text-blur-reveal">Titre</span>
<span class="demo-text text-blur-reveal"
style="animation-delay: 0.3s">Sous-titre</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 |
|---|---|---|
| blur(10px) dans .text-blur-reveal | 10px | Intensité du flou de départ. 4px = subtil, 10px = standard, 24px = dramatique. Modifier la valeur dans l'état initial du sélecteur (pas dans le keyframe, qui cible déjà blur(0)). |
| animation: 1s ease dans .text-blur-reveal | 1s ease | Durée et timing. Remplacer 1s par la valeur voulue (0.5s = vif, 1.8s = cinématique) ; ease-out pour une décélération élégante, linear pour un défloutage constant. |
| 0s (délai) dans le raccourci animation | 0s | Délai avant déclenchement. Passer à 0.3s pour laisser la page s'afficher avant l'animation, ou surcharger par élément via style="animation-delay: Xs" pour des staggered reveals. |
| opacity: 0 dans .text-blur-reveal | 0 | Opacité de départ. Passer à 0.3 pour un départ semi-visible (texte légèrement perceptible dès le premier frame — effet plus doux, moins de saut visuel). |
| font-size: 2.5rem dans .demo-text | 2.5rem | Taille du texte — l'animation s'adapte à toutes les tailles. 1rem pour un label, 6rem pour un titre héro. |
| letter-spacing: -.02em dans .demo-text | -0.02em | Espacement entre les lettres. Valeur négative pour les gros titres (look condensé), 0 ou légèrement positif pour du corps de texte. |
FAQ
.text-blur-reveal de l'élément, lire element.offsetWidth (force un reflow du navigateur), puis réappliquer la classe : el.classList.remove('text-blur-reveal'); void el.offsetWidth; el.classList.add('text-blur-reveal');. Le navigateur repart du keyframe 0 proprement — deux lignes JS, zéro dépendance..text-blur-reveal en HTML (ou la retirer via JS au chargement), puis l'appliquer dans le callback d'un IntersectionObserver quand isIntersecting passe à true : l'animation se déclenche au moment précis où l'élément devient visible, sans polling.<span class="text-blur-reveal"> et surcharger le délai en ligne : style="animation-delay: 0.2s", style="animation-delay: 0.4s", etc. Les éléments se défloutent en cascade sans JS supplémentaire.
