Kinetic Wave
Vingt points de 10 px en ligne qui montent de 30 px et redescendent, chacun 80 ms après son voisin : une onde qui court de gauche à droite en boucle de 2 s, faite d'une seule keyframe en transform — CSS pur, zéro JavaScript, une onde de lumière sans mouvement si l'utilisateur réduit les animations.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Transitions comprend 52 effets, dont 9 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le cadre .md-wave-stage (300 px de haut au minimum, fond #0a0a0f) centre une rangée .md-wave de vingt .md-wave-dot : disques de 10 px, indigo #6366f1, espacés de 4 px, soit 276 px de long. Tous jouent la même animation, 2s ease-in-out infinite mdWave : translateY(0) au départ et à l'arrivée, translateY(-30px) à mi-course. Ce qui fait l'onde, c'est le délai écrit sur chaque point dans le HTML : animation-delay de 0 s, 0,08 s, 0,16 s… jusqu'à 1,52 s pour le vingtième. Deux voisins sont décalés de 4 % du cycle ; d'un bout à l'autre de la rangée, l'écart atteint 76 % : on voit toujours environ trois quarts d'une vague, dont la crête avance de gauche à droite.
Seul transform est animé : le navigateur déplace les points sans recalculer la mise en page, et la rangée garde sa place dans la page pendant que les points montent. Les vingt points sont écrits dans le HTML, sans script : ce qui s'affiche est exactement ce qu'on colle, et l'onde marche même si JavaScript est coupé. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : 20 points, 276 px de rangée, positions verticales différentes à chaque relevé. Les délais étant positifs, au chargement l'onde se forme depuis la gauche : le dernier point ne part qu'au bout de 1,52 s. Pour une onde déjà formée à l'affichage, retranchez 2 s à chaque délai (voir les réglages).
L'onde est une boucle par nature : elle dit « ça cherche, ça écoute » tant que dure l'attente, et c'est à votre page de la retirer quand le résultat arrive, comme dans les trois exemples. Le cadre a sa propre classe, préfixée comme le reste de l'effet : deux effets de la bibliothèque collés sur la même page ne se réécrivent pas. Une variante de la catégorie fait la même vague avec des barres verticales dont la hauteur change.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, les points ne bougent plus ; l'animation devientmdWaveFade, une variation d'opacité de 1 à 0,3 avec les mêmes délais. L'onde passe toujours de gauche à droite, en lumière au lieu de hauteur. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : une seule position verticale relevée, opacité qui varie. - Lecteurs d'écran : les points sont des
divvides, sans texte. Mettezaria-hidden="true"sur.md-waveet écrivez l'état en texte à côté, dans un élémentrole="status"(« Recherche de votre casque… ») : le changement de texte est annoncé quand le résultat arrive. - Arrêt : un mouvement qui dure plus de 5 secondes doit pouvoir s'arrêter. Ici l'arrêt est le résultat : retirez ou masquez l'onde dès que la recherche aboutit ou échoue, et prévoyez un message si elle dure (« Toujours rien ? Rapprochez le casque »).
- Contraste : l'indigo
#6366f1mesure 4,4:1 sur le fond#0a0a0f, au-dessus du seuil de 3:1 pour un élément graphique.
Compatibilité navigateur
CSS pur (@keyframes, transform, animation-delay), 1,1 Ko de CSS et 1,4 Ko de HTML, zéro JavaScript. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : même onde, même remplacement par l'opacité sous mouvement réduit.
Sans animations CSS, la rangée de vingt points reste immobile, alignée au centre : l'indicateur se voit, sans vague. Ajoutez toujours un texte d'état à côté, qui reste lisible dans tous les cas.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="md-wave-stage">
<div class="md-wave">
<div class="md-wave-dot" style="animation-delay: 0s;"></div>
<div class="md-wave-dot" style="animation-delay: 0.08s;"></div>
… (20 points, délai + 0,08 s à chaque fois)
</div>
</div>Le code complet HTML + CSS + JS de Kinetic Wave, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Hauteur de la vague (CSS — translateY(-30px) à 50 %) |
30 px | 12 px donne un indicateur discret dans une ligne de texte ; 50 px une vague ample pour un écran d'attente. Prévoyez la place au-dessus de la rangée : elle ne grandit pas avec la vague. |
Durée du cycle (CSS — 2s) |
2 s | 1,2 s rend la recherche fébrile, 3 s apaisée. Gardez l'écart entre délais à environ 4 % de la durée (0,05 s pour 1,2 s) pour conserver la même forme de vague. |
Écart entre deux points (HTML — animation-delay) |
0,08 s (0 → 1,52 s) | 0,04 s étire la vague (on ne voit qu'une demi-crête) ; 0,2 s la resserre en plusieurs petites vagues. La forme dépend du rapport écart × nombre de points / durée. |
| Onde formée dès l'affichage (HTML — délais négatifs) | délais positifs : l'onde se forme depuis la gauche en 1,5 s | Retranchez la durée du cycle à chaque délai (−2 s, −1,92 s … −0,48 s) : même décalage entre points, mais chaque point démarre déjà en mouvement. Utile quand l'onde apparaît au moment d'un clic. |
Nombre, taille et couleur des points (HTML + CSS — .md-wave-dot) |
20 points de 10 px, #6366f1, espacés de 4 px |
12 points de 14 px font une onde plus lisible sur mobile (ajustez les délais en continuant de 0,08 s en 0,08 s). Un dégradé de couleur d'un point à l'autre souligne le sens de propagation. |
FAQ
hidden), ou la rangée elle-même avec une classe qui passe opacity à 0, et d'afficher le résultat à sa place. L'attribut hidden posé sur .md-wave ne suffit pas : son display: flex l'emporte ; ajoutez alors .md-wave[hidden] { display: none }. Pour figer la vague là où elle en est, posez animation-play-state: paused sur .md-wave-dot. Si vous la remasquez avec display: none, l'animation repart de zéro au retour et l'onde se reforme depuis la gauche ; avec opacity: 0, elle continue en coulisse et réapparaît déjà formée.div.md-wave-dot et écrit style.animationDelay = (i * 0.08) + 's' — videz alors la rangée du HTML pour ne pas doubler les points.transform déplace l'élément sans toucher à la mise en page : le navigateur n'a pas à recalculer la position des autres éléments à chaque image, et le mouvement reste fluide même sur un téléphone modeste. Animer margin-top ou height sur vingt éléments obligerait à refaire la mise en page de la rangée soixante fois par seconde.
