Flower Animation

Animated garden scene with blooming flowers, swaying grass, and floating heart bubbles on a dark night sky — pure CSS

Flower Animation

An animated garden scene rendered entirely in CSS. Four flowers bloom and sway on their stems, surrounded by multiple layers of swaying grass. Glowing light particles rise from the flower centers, and heart-shaped bubbles float upward across the dark starlit sky. All motion — blooming, growing, swaying, and floating — is driven by CSS @keyframes and animation-delay staggering alone, with no JavaScript.

Original art: “Flores y corazones” — ported from SCSS to plain CSS and adapted to the css-art component format.

Basic Usage

The component requires a rich HTML structure mirroring the garden layers:

Flower Animation

Sizes

Three sizes are available via modifier classes or the --art-flower-animation-size custom property:

Flower Animation Sizes

CSS Custom Properties

Property Default Description
--art-flower-animation-size 600px Overall container width; height scales at 1.1×
--art-flower-animation-bg #010113 Dark background color used for the night sky and masking

API Reference

Class Description
art-flower-animation Root container — sets size, background, overflow, and perspective
art-flower-animation-sm Sets --art-flower-animation-size to 300px
art-flower-animation-lg Sets --art-flower-animation-size to 900px
.night Full-bleed radial/linear gradient backdrop simulating a night sky
.flowers Relative-positioned wrapper for all flower and plant elements
.flower Individual flower root; applies swaying animation
.flower--1 – .flower--4 Positional variants for each of the four flowers
.flower__leafs Petal cluster; applies blooming-flower entrance animation
.flower__leafs--1 – --3 Staggered bloom delays for each flower
.flower__leaf Single petal with 3D transform
.flower__leaf--1 – --4 Per-petal rotation offsets
.flower__white-circle Flower center (stamens)
.flower__light Glowing particle that rises from the flower center
.flower__light--1 – --8 Per-particle horizontal offsets and delays
.flower__line Flower stem; applies grow-flower-tree entrance animation
.flower__line__leaf Side leaf on the stem
.flower__line__leaf--1 – --6 Per-leaf rotation and bloom direction
.flower__grass Decorative grass cluster
.flower__grass--1 / --2 Two grass variants with different sway animations
.flower__grass--top Curved grass tip
.flower__grass--bottom Straight grass stem
.flower__grass__leaf Rounded grass side blade
.flower__grass__leaf--1 – --8 Staggered grow-in animations
.flower__grass__overlay Dark blurred overlay creating depth on the grass
.flower__g-long Tall background plant
.flower__g-right Wide sweeping leaf on the right
.flower__g-right--1 / --2 Two right-leaf variants
.flower__g-front Small front-facing fern frond
.flower__g-front__leaf-wrapper Wrapper for individual frond leaflets
.flower__g-front__leaf Triangular masked frond leaflet
.flower__g-fr Large foreground plant
.flower__g-fr__leaf Side leaflet on the foreground plant
.flower__g-fr__leaf--1 – --8 Per-leaflet staggered grow-in
.long-g Group of tall background grass blades
.long-g--0 – --7 Positional variants scattered across the scene
.grow-ans Utility class: grows element from scaleY(0) using --d delay
.growing-grass Absolute wrapper anchoring grass groups to the bottom
.bubbles Container for the floating heart elements
.bubble Individual heart; animates upward with fade
.heart SVG heart icon inside each bubble