> You could use a bit of JavaScript with setTimeout to get rid of the modal at the right time
This always felt hacky to me, "animating" visibility instead is a great idea. Thanks for sharing!
Surprising things that CSS can animate (2020)
11–20 of 48 posts
Re: Surprising things that CSS can animate (2020)
#12None of the examples in the article work with js disabled.
I'll say more generally, that as much as I love all the cool things CSS is capable of these days, I think it's gotten to the point where now I want a CSS blocker the same way I block ads and JS by default, ideally something that lets me enable only a sane subset of CSS while blocking everything else.
I keep meaning to write one for firefox, but I really don't have the time, and I'm honestly hoping somebody comes along and beats me to it.
Re: Surprising things that CSS can animate (2020)
#13Yeah, I too had fun with CSS and curvy circular text animation. https://egbert.net/blog/index.html (Sorry, web access is only HTTP/1.1-3, TLSv1.3 and ChaCha-only, no Chrome access possible)
It's weird being able to highlight animated text like this
Re: Surprising things that CSS can animate (2020)
#14None of the examples in the article work with js disabled. I'll say more generally, that as much as I love all the cool things CSS is capable of these days, I think it's gotten to the point where now I want a CSS blocker the same way I block ads and JS by default, ideally something that lets me enable only a sane subset of CSS while blocking everything else. I keep meaning to write one for firefox, but I really don't…
> None of the examples in the article work with js disabled.
Some because of Codepen.io embeds? The ghost and pricing tables should work on their own.
Re: Surprising things that CSS can animate (2020)
#15I always love seeing tricks like this from designers but then I never see anything this cool on the web otherwise. Where do all these great designers work and why don't I ever get to see the products they make?
https://medium.com/bridge-collection/3d1b0a9b810e Stripe using animations back in 2014.
Re: Surprising things that CSS can animate (2020)
#16None of the examples in the article work with js disabled. I'll say more generally, that as much as I love all the cool things CSS is capable of these days, I think it's gotten to the point where now I want a CSS blocker the same way I block ads and JS by default, ideally something that lets me enable only a sane subset of CSS while blocking everything else. I keep meaning to write one for firefox, but I really don't…
> None of the examples in the article work with js disabled. Some because of Codepen.io embeds? The ghost and pricing tables should work on their own.
Codepen is certainly part of it. Lots of boxes with nothing inside but centered text saying things like "See the Pen Spooky Boo! by Will Boyd (@lonekorean) on CodePen."
Nothing on that page animates for me, although I'm sure that's my fault. CSS should work, but I've got a whole lot more than just JS disabled in this browser too. For what it's worth I tried to search the page for the words "ghost" "table" and "price" and couldn't find any mention.
Re: Surprising things that CSS can animate (2020)
#17> You could use a bit of JavaScript with setTimeout to get rid of the modal at the right time This always felt hacky to me, "animating" visibility instead is a great idea. Thanks for sharing!
There's also a way to do it on exactly the right frame: https://developer.mozilla.org/en-US/docs/Web/API/Element/tra...
Re: Surprising things that CSS can animate (2020)
#18> You could use a bit of JavaScript with setTimeout to get rid of the modal at the right time This always felt hacky to me, "animating" visibility instead is a great idea. Thanks for sharing!
There's also a way to do it on exactly the right frame: https://developer.mozilla.org/en-US/docs/Web/API/Element/tra...
That's been a thing for almost a decade now. I don't do much CSS anymore but I think not enough people have been using it
Re: Surprising things that CSS can animate (2020)
#19Earlier quoted context omitted.
> None of the examples in the article work with js disabled. Some because of Codepen.io embeds? The ghost and pricing tables should work on their own.
Codepen is certainly part of it. Lots of boxes with nothing inside but centered text saying things like "See the Pen Spooky Boo! by Will Boyd (@lonekorean) on CodePen." Nothing on that page animates for me, although I'm sure that's my fault. CSS should work, but I've got a whole lot more than just JS disabled in this browser too. For what it's worth I tried to search the page for the words "ghost" "table" and "price"…
Not sure what sort of person downvoted you. I, too, have an issue with a page about CSS tricks requiring JS.
I may write JS for a living but I do browse the internet without it
Edit: someone downvoted you again as I was writing this, heh. Is this even a healthy thing to do on a Saturday morning
Re: Surprising things that CSS can animate (2020)
#20I watched all of those animations on Safari. The constant reminder that you wouldn't see anything on Safari had me doubt my sanity.
It's because the post is from 2020