Breathing Text
Animation CSS pure — chaque mot pulse entre scale(1) et scale(1.08) sur 3 secondes, décalé par une variable --delay individuelle pour créer une respiration vivante sans 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 cœur de l'effet est @keyframes ktBreathe : à 0 % et 100 %, chaque mot est à transform: scale(1) et opacity: 0.85 ; au pic à 50 %, il atteint scale(1.08) et opacity: 1. La courbe ease-in-out sur 3 secondes donne l'impression d'une inspiration et d'une expiration douces. L'animation est déclarée infinie sur le sélecteur .kt-breathing .word, qui requiert display: inline-block — les transformations CSS n'ont aucun effet sur les éléments purement inline.
Le décalage mot par mot repose sur une variable CSS --delay posée dans l'attribut style de chaque <span class="word">. La règle animation-delay: var(--delay) lit cette valeur individuellement par élément, sans JavaScript. Ajouter un mot revient à insérer un <span class="word" style="--delay: Xs"> — le pas entre mots est entièrement libre.
Le fichier JS présent dans le code définit une fonction splitChars(el) (découpage de data-text en spans .char) et sélectionne un élément via getElementById('fadeInText'), mais ni la fonction ni la variable ne sont appelées à l'exécution — c'est du code utilitaire hérité d'un autre effet. L'animation de respiration fonctionne entièrement sans JS : le bloc <script> peut être supprimé ou remplacé sans rien casser.
Chaque .word se dilate depuis son centre grâce au transform-origin par défaut (50% 50%) — aucun décalage de mise en page, les mots voisins ne bougent pas. L'absence de will-change évite la réservation d'une couche GPU au repos, limitant l'empreinte mémoire quand plusieurs instances coexistent sur la page.
Accessibilité
- prefers-reduced-motion : absent. Aucun bloc
@media (prefers-reduced-motion: reduce)n'est présent dans le CSS. L'animation tourne en boucle infinie même si l'OS signale une préférence pour réduire le mouvement. Ajout recommandé :@media (prefers-reduced-motion: reduce) { .kt-breathing .word { animation: none; } }. - Aucun attribut
aria-*niroledans le HTML fourni. Pour un titre purement décoratif, c'est acceptable ; si le texte porte du sens pour les lecteurs d'écran, enveloppez le container dans un<p aria-label="texte complet">et ajoutezaria-hidden="true"sur chaque<span class="word">. - Contraste : blanc (#fff) sur fond sombre (#0a0a0f) → ratio > 20:1, largement au-dessus du seuil WCAG AA (4,5:1).
- Aucun élément interactif dans l'effet — navigation clavier sans impact, aucun gestionnaire d'événement clavier n'est attaché.
- L'animation n'implique ni flash, ni clignotement rapide, ni déplacement de grande amplitude (scale 1 → 1,08 sur 3 s) — aucun risque de déclenchement de crise photo-épileptique.
Compatibilité navigateur
Requiert CSS Custom Properties et CSS Animations — supportés dans tous les navigateurs modernes. Zéro dépendance externe.
Sans support des custom properties CSS (navigateurs très anciens), <code>animation-delay</code> tombe à 0 s (valeur initiale) — tous les mots respirent à l'unisson au lieu de se décaler. L'effet de respiration reste présent, simplement non décalé.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="kt-text kt-breathing" data-text="BREATHE IN OUT">
<span class="word" style="--delay: 0s;">BREATHE</span>
<span class="word" style="--delay: 0.5s;">IN</span>
<span class="word" style="--delay: 1s;">OUT</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 |
|---|---|---|
| --delay (inline sur chaque .word) | 0s, 0.5s, 1s… | Décalage d'animation par mot. Augmentez le pas pour une vague plus prononcée, réduisez-le pour une respiration quasi-simultanée. |
| animation-duration (règle CSS .kt-breathing .word) | 3s | Durée d'un cycle complet. 2 s = nerveux, 5–6 s = méditatif. Peut être surchargé mot par mot via style en inline. |
| scale() à 50% dans @keyframes ktBreathe | scale(1.08) | Amplitude maximale de la respiration. scale(1.04) = subtil, scale(1.15) = dramatique. Au-delà de scale(1.2), les mots adjacents commencent à se chevaucher. |
| opacity à 0%/100% dans @keyframes ktBreathe | 0.85 | Opacité au repos (creux de la respiration). Passez à 0.6 pour un effet plus marqué, 1 pour supprimer l'oscillation d'opacité. |
| font-size dans .kt-text | 2.2rem | Taille du texte. L'effet est perceptible à partir de 1.5 rem — en dessous, le scale de 1.08 est imperceptible. |
| color dans .kt-text | #fff | Couleur du texte. Tout hex ou rgba fonctionne ; une teinte légère (ex. #a5f3fc bleu glacé) accentue un registre spirituel ou organique. |
| letter-spacing dans .kt-text | 0.02em | Espacement entre lettres. Augmentez à 0.08em ou plus pour un rendu monumental adapté aux affiches ou slides plein écran. |
| margin dans .kt-breathing .word | 0 0.15em | Espace entre mots. Augmentez pour que chaque mot dispose de son propre halo et n'empiète pas sur ses voisins lors du scale. |
| animation-timing-function dans .kt-breathing .word | ease-in-out | Courbe d'accélération. linear = mécanique, ease-in-out = naturel/respiratoire. cubic-bezier(0.45,0,0.55,1) produit un souffle encore plus doux. |
FAQ
splitChars() et sélectionne un élément, mais aucun des deux n'est appelé à l'exécution. L'animation de respiration est entièrement pilotée par le CSS — le keyframe ktBreathe et la variable --delay suffisent. Le bloc <script> peut être supprimé sans rien casser.style="animation-duration: 4s" sur le span « INSPIRE », 7s sur « RETIENS » et 8s sur « EXPIRE ». Chaque mot peut avoir sa propre durée : la propriété animation-duration est héritée mais se surcharge via l'attribut style, et le cycle de chaque mot est indépendant.splitChars(el) déjà présente dans le JS découpe data-text en <span class="char">. Appelez-la, remplacez .word par .char dans la règle CSS .kt-breathing et assignez --delay de façon incrémentale (ex. 0.08s par lettre) pour obtenir un effet lettre par lettre avec le même keyframe.
