Animated Bento
Six cells of an asymmetric 4×3 CSS grid cascade in on load — pure CSS stagger, spring easing, replayable on demand.
You'll get access to the interactive demo with a free account.
This effect is part of Effect.Labs — 811 vanilla effects, some free, some premium. Cards has 41 effects, including 6 free. Explore the category →
3 usage examples
How it works
The grid uses an explicit 4-column × 3-row template with grid-area spans on each cell (1×2, 2×1, or 2×2 depending on the cell), producing a precise asymmetric layout regardless of content.
Each cell starts at opacity: 0; transform: translateY(30px) scale(0.9) and reaches its final state via the bentoFadeIn keyframe in 600 ms with the cubic-bezier(.16, 1, .3, 1) easing — an under-damped spring curve that produces a slight overshoot on arrival. animation-fill-mode: forwards keeps the cell invisible before its delay, eliminating any unwanted flash.
The stagger is built from simple ascending animation-delay values in the CSS: 0.1 s for .cell-1, 0.2 s for .cell-2… up to 0.6 s for .cell-6. No JavaScript drives the entrance — the CSS engine sequences the animations natively.
Replay is handled by replayAnimation(): the function strips the inline animation style from each cell, reads element.offsetHeight to force a reflow (flushing the browser's style engine), then clears the style — triggering a fresh CSS animation run with all delays reset.
Accessibility
- ⚠️ prefers-reduced-motion not implemented: the code does not check the system preference. Cells animate even if the user has enabled "reduce motion" in the OS — add
@media (prefers-reduced-motion: reduce) { .bento-cell { animation: none; opacity: 1; transform: none; } }manually if needed. - Text content inside cells (
<span>tags) is accessible to screen readers independently of the CSS animation. - The replay button is a native
<button>, keyboard-focusable and activatable via Space or Enter. - The colored gradient cells in the base effect carry no overlaid text — contrast is not an issue for the effect itself. Verify when adding text content during integration.
- No
ariaattributes are present on the grid — enrich according to context:role="list"if cells form navigation,aria-labelon the container if the grid is decorative.
Browser compatibility
Requires CSS Grid and CSS Animations — natively supported in all modern browsers since 2017. Zero external dependencies.
On IE 11 and earlier (no CSS Grid support), cells display as vertical blocks without the bento layout — no JS errors, content stays readable. The CSS animation is silently ignored.
The code
HTML structure to paste into your page (CSS + JS available with a premium account):
<div class="bento-container">
<div class="bento-grid bento-animated" id="animatedBento">
<div class="bento-cell cell-1"><span>Content</span></div>
<div class="bento-cell cell-2"><span>Content</span></div>
<div class="bento-cell cell-3"><span>Content</span></div>
<div class="bento-cell cell-4"><span>Content</span></div>
<div class="bento-cell cell-5"><span>Content</span></div>
<div class="bento-cell cell-6"><span>Content</span></div>
</div>
<!-- Optional replay button -->
<button class="replay-btn" onclick="replayAnimation()">Replay</button>
</div>Full HTML + CSS + JS, copy-paste ready — with hundreds of premium effects.
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
| animation-delay (CSS per .cell-N) | 0.1 s → 0.6 s (0.1 s step) | Stagger interval. Reduce to 0.05 s per cell for a fast effect or increase to 0.2 s for a cinematic pace. |
| animation: .6s … (CSS .bento-animated .bento-cell) | 0.6s | Per-cell animation duration. 0.3 s for energetic, 1 s for dramatic. |
| cubic-bezier(.16, 1, .3, 1) (CSS easing) | under-damped spring | Acceleration curve. Replace with ease-out for a smooth exit without bounce, or cubic-bezier(.34, 1.56, .64, 1) for a stronger overshoot. |
| translateY(30px) scale(.9) (CSS origin state) | 30 px / 90 % | Initial offset of each cell before the animation. Increase the translation for a more pronounced 'rise from below' effect. |
| gap: 12px (CSS .bento-grid) | 12px | Spacing between cells. 4 px for compact layouts, 24 px for an airy feel. |
| background: linear-gradient(…) (CSS per .cell-N) | 6 distinct color gradients | Background color of each cell. Swap in your brand palette or a flat color — the stagger remains visible regardless of color. |
| --radius-lg (:root) | 0.75rem | Corner radius of the cells. 0 = sharp rectangles, 1rem = well-rounded corners. |
| replayAnimation() (JS, external call) | — | Call from any JS event to replay the cascade — after a data reload, a view change, or an interactive tutorial step. |
FAQ
animation-delay directly in the stylesheet. JavaScript only handles the replay button (which forces a reflow to restart the CSS animation), not the initial entrance.replayAnimation() from any JS listener. The function targets #animatedBento, strips the inline animation style from each cell, reads element.offsetHeight to force a reflow, then clears the style — the browser restarts the CSS animation from the beginning with all delays reset.grid-area: span N / span N rules on each .cell-N define the layout. Change grid-template-columns and grid-template-rows on .bento-animated and adjust the spans accordingly — the CSS animation applies automatically to all cells without any JavaScript changes.
