Animated Bento
Six cellules d'une grille CSS asymétrique 4×3 surgissent en cascade au chargement — stagger pur CSS, easing spring, rejouable à la demande.
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. Cartes comprend 41 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La grille repose sur un template 4 colonnes × 3 lignes avec des grid-area explicites sur chaque cellule (spans 1×2, 2×1 ou 2×2 selon la cellule), ce qui garantit une disposition asymétrique précise indépendamment du contenu.
Chaque cellule part de opacity: 0; transform: translateY(30px) scale(0.9) et rejoint son état final via le keyframe bentoFadeIn en 600 ms avec l'easing cubic-bezier(.16, 1, .3, 1) — une courbe « spring » sous-amortic qui produit une légère surtension à l'arrivée. L'animation-fill-mode: forwards maintient la cellule invisible avant son délai, supprimant tout flash d'affichage non sollicité.
Le stagger est créé par de simples animation-delay croissants dans le CSS : 0,1 s pour .cell-1, 0,2 s pour .cell-2… jusqu'à 0,6 s pour .cell-6. Aucun JavaScript ne pilote l'entrée — le moteur CSS séquence les animations nativement.
La rejouabilité est assurée par replayAnimation() : la fonction retire le style animation inline sur chaque cellule, lit element.offsetHeight pour forcer un reflow (flush du moteur de style du navigateur), puis restitue le style vide — le navigateur relance alors la CSS animation depuis le début avec tous ses délais.
Accessibilité
- ⚠️ prefers-reduced-motion absent : le code ne détecte pas la préférence système. Les cellules s'animent même si l'utilisateur a activé « réduire les animations » dans l'OS — à ajouter manuellement avec
@media (prefers-reduced-motion: reduce) { .bento-cell { animation: none; opacity: 1; transform: none; } }. - Le contenu textuel des cellules (balises
<span>) est accessible aux lecteurs d'écran indépendamment de l'animation CSS. - Le bouton « Rejouer » est un
<button>natif, focusable au clavier et activable par Espace ou Entrée. - Les cellules colorées de l'effet de base ne superposent pas de texte sur les gradients — le contraste n'est pas un enjeu pour l'effet nu. À vérifier lors de l'intégration si du contenu textuel est ajouté.
- Aucun attribut
arian'est présent sur la grille — à enrichir selon le contexte :role="list"si les cellules constituent une navigation,aria-labelsur le conteneur si la grille est décorative.
Compatibilité navigateur
Nécessite CSS Grid et CSS Animations — supportés nativement dans tous les navigateurs modernes depuis 2017. Zéro dépendance externe.
Sur IE 11 et antérieurs (sans support CSS Grid), les cellules s'affichent en bloc vertical sans mise en forme bento — aucune erreur JS, le contenu reste lisible. L'animation CSS est ignorée silencieusement.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="bento-container">
<div class="bento-grid bento-animated" id="animatedBento">
<div class="bento-cell cell-1"><span>Contenu</span></div>
<div class="bento-cell cell-2"><span>Contenu</span></div>
<div class="bento-cell cell-3"><span>Contenu</span></div>
<div class="bento-cell cell-4"><span>Contenu</span></div>
<div class="bento-cell cell-5"><span>Contenu</span></div>
<div class="bento-cell cell-6"><span>Contenu</span></div>
</div>
<!-- Bouton optionnel de rejeu -->
<button class="replay-btn" onclick="replayAnimation()">Rejouer</button>
</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-delay (CSS par .cell-N) | 0,1 s → 0,6 s (pas de 0,1 s) | Intervalle du stagger. Réduisez à 0,05 s par cellule pour un effet rapide ou augmentez à 0,2 s pour un rythme cinématique. |
| animation: .6s … (CSS .bento-animated .bento-cell) | 0.6s | Durée de l'animation par cellule. De 0,3 s (dynamique) à 1 s (dramatique). |
| cubic-bezier(.16, 1, .3, 1) (CSS easing) | spring sous-amorti | Courbe d'accélération. Remplacez par ease-out pour une sortie fluide sans rebond, ou cubic-bezier(.34, 1.56, .64, 1) pour un rebond plus marqué. |
| translateY(30px) scale(.9) (CSS départ .bento-animated .bento-cell) | 30 px / 90 % | Décalage initial de chaque cellule avant l'animation. Augmentez la translation pour un effet « fondu depuis le bas » plus prononcé. |
| gap: 12px (CSS .bento-grid) | 12px | Espacement entre les cellules. De 4 px (compact) à 24 px (aéré). |
| background: linear-gradient(…) (CSS .cell-N) | 6 dégradés colorés distincts | Couleur de fond de chaque cellule. Remplacez par votre palette brand ou une couleur unie — le stagger reste visible quelle que soit la couleur. |
| --radius-lg (:root) | 0.75rem | Rayon des coins des cellules. 0 = rectangles nets, 1rem = coins bien arrondis. |
| replayAnimation() (JS, appel externe) | — | Appeler depuis n'importe quel événement JS pour rejouer la cascade — après un rechargement de données, un changement de vue ou un tutoriel interactif. |
FAQ
animation-delay croissant directement dans la feuille de style. JavaScript intervient uniquement pour le bouton « Rejouer » (qui force un reflow afin de redémarrer l'animation CSS), pas pour l'entrée initiale.replayAnimation() depuis n'importe quel écouteur JS. La fonction cible #animatedBento, retire le style animation inline sur chaque cellule, lit element.offsetHeight pour forcer un reflow, puis restitue — le navigateur redémarre la CSS animation depuis le début avec tous ses délais.grid-area: span N / span N sur chaque .cell-N définissent la disposition. Changez grid-template-columns et grid-template-rows sur .bento-animated et adaptez les spans en conséquence — la CSS animation s'applique automatiquement à toutes les cellules sans modification du JavaScript.
