Icon Bounce
Une icône rebondit en 5 étapes (translateY : 0 → -12 → -4 → -8 → 0) en 0,5 s au survol — le texte reste fixe, pure CSS @keyframes.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Hover comprend 48 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0348-root centre un bouton de 200 px en colonne (flex-direction: column). L'icône (.ibc-icon) et le libellé sont deux <span> distincts. Au repos, l'icône est immobile. Au survol, l'animation ibc-bounce s'applique à l'icône seule : 0,5 s, une seule itération. Les cinq étapes translateY (0 → -12 px → -4 px → -8 px → 0) donnent l'impression d'un rebond naturel — montée rapide, recul partiel, deuxième petit saut, retour. Le libellé textuel reste fixe, non affecté par l'animation.
L'animation est déclenchée au survol du bouton entier, pas seulement de l'icône. Cela couvre la zone de frappe naturelle (tout le bouton) sans dépendre de la position précise du curseur. :focus-visible déclenche la même animation. Sous mouvement réduit, l'animation est neutralisée : l'icône reste immobile même au survol, et le retour d'état est porté par un contour.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, l'animationibc-bounceest explicitement supprimée au survol et au focus. L'icône reste immobile. Le retour d'état clavier est porté par le contour de focus. - Clavier : l'élément est un
<button>nativement focusable.:focus-visibledéclenche le rebond de l'icône et ajoute un contour de 2 px. - Rôle de l'icône : l'icône (
aria-hidden="true") est décorative ; le libellé textuel porte la sémantique. Les lecteurs d'écran n'annoncent pas le mouvement. - Toucher : sur écran tactile, le tap peut ne pas déclencher l'animation
:hoversur tous les navigateurs. L'interaction fonctionnelle (clic) n'en dépend pas.
Compatibilité navigateur
Pure CSS. Propriétés : @keyframes, animation (1 itération déclenchée au survol), :focus-visible. Vérifié dans Chromium et Firefox : rebond visible, deux copies indépendantes, 0 erreur. Sur navigateurs antérieurs à 2021, :focus-visible n'est pas disponible.
Sans :focus-visible (avant 2021), le focus clavier ne déclenche pas le rebond.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0348-root">
<button class="ibc-box" type="button">
<span class="ibc-icon" aria-hidden="true">🚀</span>
<span>Votre texte</span>
</button>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Icône (HTML — .ibc-icon) |
🚀 (emoji) | Remplacez par n'importe quel emoji, SVG inline ou icône de police (Font Awesome, Heroicons…). La taille se règle via font-size. |
Hauteur du rebond (CSS — -12px au pic) |
-12 px | -20px pour un bond plus ample ; -6px pour un frémissement. Ajustez en cohérence les trois valeurs : 40 %, 70 %, 85 %. |
Durée (CSS — 0.5s) |
0,5 s | 0,3 s est plus vif ; 0,8 s donne un rebond plus lent et lourd. |
Disposition (CSS — flex-direction: column) |
icône au-dessus du libellé | Passez à flex-direction: row (icône à gauche du libellé) et retirez margin-bottom sur l'icône — ajoutez margin-right à la place. |
Nombre d'itérations (CSS — animation: ... 1) |
1 seule fois au survol | Passez à infinite pour un rebond continu (non recommandé, attention au mouvement réduit). |
FAQ
el.addEventListener('click', () => { el.classList.remove('ibc-clicked'); void el.offsetWidth; el.classList.add('ibc-clicked'); }) et liez l'animation à .ibc-clicked .ibc-icon plutôt qu'à :hover.animationend sur l'icône qui retire la classe ou réinitialise l'animation avec animation: none puis requestAnimationFrame..ibc-icon à chaque icône. L'animation s'applique à tous les éléments portant cette classe dans le bouton au survol. Pour des délais différents, ajoutez animation-delay sur chaque icône.
