Stunning Staggered CSS Animation/Transition on Page Load
Рет қаралды 1,370
Күн бұрын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/eY...
Animate HTML Details: • Animate HTML Details &...
Transition to height auto: • Transition to "height:...
Individual Transform Properties: • Create Complex Transit...
📖 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: / 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: zoranjambor.com
💼 LinkedIn: / zoranjambor
- Zoran Jambor
#css #cssanimation
@D7460N Ай бұрын
This great! Thank you for posting!
@CSSWeekly Ай бұрын
Thank you so much! I'm thrilled you think so! 🙂
@ScriptRaccoon Ай бұрын
Good to know, I didnt know about @starting-style yet! For me it is always a big downer to find out in the very end of the video that browser support is not so good. Also in the last video about the details element (which I really enjoyed as well). Even though the market share of some browsers is not big, I would not ship something which excludes their users. What others call "progressive enhancement" is for me inconsistent design. This is why I always prefer solutions that work across the board. For example to animate the details elements I still use JavaScript. And to achieve this fading effect here I would still use regular CSS animations. It is not much more work, and at the same time more users will benefit from it. Having said all this, I would very much prefer to know browser support in the beginning of each video. Or already summarize it as Kevin often does ("browser support is good but not 100 percent, will come back to that later"). Then it would not be such a downer in the end. Just my opinion, and don't know how others feel about it. Thanks again for the video and all your CSS content!
@CSSWeekly Ай бұрын
Thanks so much for sharing your insight! 🙏 I agree; in the real world, particularly with clients, it would be difficult to "sell" a key interaction like this as progressive enhancement, so I'd probably reach for a cross-browser solution, too, even if it requires JavaScript. 🙂 Thanks for the suggestion about noting browser support earlier in the video. It makes perfect sense. 🙏
@argyleink Ай бұрын
can't wait until we have sibling-index() and then you wont need the inline variables!
@ScriptRaccoon Ай бұрын
Ah I was thinking the same during the video, but didn't know there was already a proposal. Looking forward to that! Meanwhile, we can use Sass loops, which work quite well.
@CSSWeekly Ай бұрын
Oh, I haven't heard about sibling-index() - I'm already looking forward to playing with it. 🙂 Thanks so much for watching, and sharing this, Adam! 🙏
@web-atelier Ай бұрын
Excellent, thanks.
@CSSWeekly Ай бұрын
Thank *you* for watching and commenting! 🙂
@petrgoca 26 күн бұрын
Hi, great video again ;-) How do those starting-styles affect pagespeed metrics like CLS etc.?
@CSSWeekly 22 күн бұрын
Thanks so much for the compliment, and a fantastic question, Petr! 🙏 To be honest, I have no idea how this affects pagespeed metrics. As this is an intentional UI improvement (that you could potentially opt out of using prefers-reduced-motion), I guess it shouldn't affect those metrics negatively. But I can't really be certain without digging into it. Do you have any insight into how a CSS animation on page load affects pagespeed metrics, perhaps?
@petrgoca 20 күн бұрын
@@CSSWeekly I don't... but I asked my page-speed specialist friend. If I have any news, I let you know.
@CSSWeekly 19 күн бұрын
That's very cool. Thanks so much! 🙂
@D7460N Ай бұрын
You mentioned using a counter. Can elements be targeted based on their counter value? As far as I have been able to find, counter values cannot be used by CSS as a selector. I hope I am wrong though, because the implications of auto-generating unique IDs through a CSS counter would be tremendous! Thanks again for a great video.
@CSSWeekly Ай бұрын
That's a fantastic question! 🙏 As far as I know, there is currently no way to use a counter in CSS as a part of a selector. I wanted to make it work like this for this demo, but I don't think it's possible right now. 😔
@CSSWeekly Ай бұрын
And if it ever becomes possible, I'll certainly create a guide on how it works. 🙂
@ScriptRaccoon Ай бұрын
You can use a Sass loop. for $i from 0 to 4 { .your-selector:nth-child(#{$i}) { ... } }
@borstenpinsel Ай бұрын
What do you have in mind? Why do you want to retrieve the counter value? Can't you just use :nth-child()?
@CSSWeekly Ай бұрын
Currently, you can't use the :nth-child() index in the property value. In my example, if I could use the index of :nth-child() in calc(200ms * INDEX), I wouldn't have to set --i in HTML to increase the delay for every item. I hope this makes sense. 🙂
@Atractiondj Ай бұрын
Sorry but try to copy UI components from dribble or Behance.. it hurts my eyes to look at this visual horror with a gradient background... improve the visuals of the elements
@CSSWeekly Ай бұрын
Oh wow, I didn't realize it's that bad. 😔 Thanks for your feedback and the suggestion, Davidov! 🙏
Typecase
Рет қаралды 1,3 МЛН
Brother-live_mob
Рет қаралды 938 М.
Buy Smart┃Магазин ноутбуков
Рет қаралды 889 М.