Stunning Staggered CSS Animation/Transition on Page Load

Published: 11 June 2024
on channel: CSS Weekly

3,997

159

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: https://codepen.io/ZoranJambor/pen/eY...
Animate HTML Details:    • Animate HTML Details & Summary Elemen...
Transition to height auto:    • Animate to "height: auto;" & "display...
Individual Transform Properties:    • Create Complex Transitions With Indiv...

📖 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:
💌 https://css-weekly.com/

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

Keep up-to-date with CSS Weekly:
🐦 Twitter:   / @cssweekly
🎶 TikTok:   / cssweekly
🎇 Instagram:   / cssweekly
📘 Facebook:   / cssweekly

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

Zoran Jambor
#css #cssanimation