← All elements
<div class="container">
<div class="sun">
<div class="sunrays"></div>
<div class="circle"></div>
</div>
<div class="shadow"></div>
<div class="pot"></div>
<div class="water-jar"></div>
<div class="water"></div>
<div class="flower">
<div class="stem"></div>
<div class="leaf"></div>
<div class="petal petal-1"></div>
<div class="petal petal-2"></div>
<div class="petal petal-3"></div>
<div class="petal petal-4"></div>
<div class="petal petal-5"></div>
<div class="petal petal-6"></div>
<div class="dot"></div>
</div>
</div>About this animation
A small garden scene: a rotating sun, a water jar that tips, a stem with three leaves that grows out of a pot and a flower whose petals open.
How it works
Everything is drawn with absolutely positioned shapes: a rotating sun with rays, a triangle pot, a water jar and drops. Keyframes then fade in the jar, pour the water, grow the stem, unfold three leaves and finally open the flower and its petals in sequence.
Ways to customise it
- Change the sky colour on the body.
- Edit the pot colours.
- Slow the grow keyframes.
Good to know
It is a long animation with many parts, so it suits a hero or empty state. The scene is decorative, and a reduced-motion rule can show the finished flower instead.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.