Uploaded June 2024 | Updated September 2026, 1 week ago

---

Find out how to create a stunning staggered fade-in animation on page load with pure CSS, using Transitions, @starting-style at-rule, and Custom Properties.

🔗 Links
Demo: codepen.io/ZoranJambor/pen/eYaEwez
Animate HTML Details: youtu.be/idoaw75xjhU
Transition to height auto: youtu.be/1VsMKz4Zweg
Individual Transform Properties: youtu.be/ZAXSbjrOZwg

📖 Chapters
00:00 Fade in effect using CSS Animations
01:20 Fade in effect with CSS Transitions (@starting-style)
03:32 Slide, scale, & fade-in effect
04:29 Staggered animation using :nth-child()
05:25 Staggered animation using Custom Properties and calc()
08:09 Browser Support for @starting-style at-rule

Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com

Help support CSS Weekly
👨‍🎓 Get a course: masteringlinting.com
🪧 Buy a CSS sticker pack: stickers.css-weekly.com
💖 Support me on Patreon: patreon.com/cssweekly

Keep up-to-date with CSS Weekly:
🐦 Twitter: twitter.com/@cssweekly
🎶 TikTok: tiktok.com/@cssweekly
🎇 Instagram: instagram.com/cssweekly
📘 Facebook: facebook.com/CSSWeekly

Keep up to date with what I'm up to:
👨‍💼 Blog: zoranjambor.com
💼 LinkedIn: linkedin.com/in/zoranjambor

- Zoran Jambor
#css #cssanimation