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

PropertyDefaultDescription
--art-flower-animation-size600pxOverall container width; height scales at 1.1×
--art-flower-animation-bg#010113Dark background color used for the night sky and masking

API Reference

ClassDescription
art-flower-animationRoot container — sets size, background, overflow, and perspective
art-flower-animation-smSets --art-flower-animation-size to 300px
art-flower-animation-lgSets --art-flower-animation-size to 900px
.nightFull-bleed radial/linear gradient backdrop simulating a night sky
.flowersRelative-positioned wrapper for all flower and plant elements
.flowerIndividual flower root; applies swaying animation
.flower--1 – .flower--4Positional variants for each of the four flowers
.flower__leafsPetal cluster; applies blooming-flower entrance animation
.flower__leafs--1 – --3Staggered bloom delays for each flower
.flower__leafSingle petal with 3D transform
.flower__leaf--1 – --4Per-petal rotation offsets
.flower__white-circleFlower center (stamens)
.flower__lightGlowing particle that rises from the flower center
.flower__light--1 – --8Per-particle horizontal offsets and delays
.flower__lineFlower stem; applies grow-flower-tree entrance animation
.flower__line__leafSide leaf on the stem
.flower__line__leaf--1 – --6Per-leaf rotation and bloom direction
.flower__grassDecorative grass cluster
.flower__grass--1 / --2Two grass variants with different sway animations
.flower__grass--topCurved grass tip
.flower__grass--bottomStraight grass stem
.flower__grass__leafRounded grass side blade
.flower__grass__leaf--1 – --8Staggered grow-in animations
.flower__grass__overlayDark blurred overlay creating depth on the grass
.flower__g-longTall background plant
.flower__g-rightWide sweeping leaf on the right
.flower__g-right--1 / --2Two right-leaf variants
.flower__g-frontSmall front-facing fern frond
.flower__g-front__leaf-wrapperWrapper for individual frond leaflets
.flower__g-front__leafTriangular masked frond leaflet
.flower__g-frLarge foreground plant
.flower__g-fr__leafSide leaflet on the foreground plant
.flower__g-fr__leaf--1 – --8Per-leaflet staggered grow-in
.long-gGroup of tall background grass blades
.long-g--0 – --7Positional variants scattered across the scene
.grow-ansUtility class: grows element from scaleY(0) using --d delay
.growing-grassAbsolute wrapper anchoring grass groups to the bottom
.bubblesContainer for the floating heart elements
.bubbleIndividual heart; animates upward with fade
.heartSVG heart icon inside each bubble