An Animated Poem built with CSS Drawings & Animations (CodePen Show & Tell)
summary
A hand‑coded animated poem built with HTML and CSS uses ::before/::after pseudo-elements and CSS Grid and keyframes to draw characters, a heart balloon, stars and a curved ground, animating position, rotation, opacity and element height. The prototype takes 10 hours to create, places 500 stars via a looped list with varied top/left and delays, lands on CodePen front page, and proves CSS‑only drawings and animations can be expressive and career‑changing.
AI-written summary · about
chapters (19)
- 0:00Introduction
- 3:23Why create an animated poem
- 5:38CSS drawing basics
- 8:55Drawing the heart balloon
- 11:28Drawing me and Amanda
- 19:56Drawing the dress and details
- 20:42Mini hearts and stars
- 23:20Ground and sky setup
- 26:37CSS animations overview
- 27:23Flying animation
- 29:18Blinking eyes animation
- 30:48Mini hearts popping up
- 31:51Stars appearing animation
- 32:58Sky rotation animation
- 34:02Ground and text reveal
- 35:09Full animated poem demo
- 36:14Key takeaways and learnings
- 37:47Exercise your creativity
- 38:28Call to action and Q&A
