Interesting how so many of these didn't work in Safari in 2020, but all of them do now. Good progress for interoperability, I guess.
They didn’t work for me on Safari mobile.
Surprising things that CSS can animate (2020)
21–30 of 48 posts
Re: Surprising things that CSS can animate (2020)
#22None 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…
"Doctor, it hurts when I do this"
...
Re: Surprising things that CSS can animate (2020)
#23I 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?
If you browse Awwward-winning websites, you quickly realise that they are annoying to browse.
Most of the time, I'm just trying to read text and get an answer. Everything that is not text, formatting or typography gets in the way.
Re: Surprising things that CSS can animate (2020)
#24Re: Surprising things that CSS can animate (2020)
#25I 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?
Because these animations only work in rigidly specified isolated static objects. Because god forbid any animation touches layout.
Well, many of those animations like opacity changes and border animations undoubtedly force the browser to re-layout and repaint the entire screen anyway. So on an actual page you'll se stutters, frame drops and ungodly CPU usage.
The only animations that will (barely) work is the `transform: translate` ones as they usually preserve the layout, and can be composited on the GPU.
Re: Surprising things that CSS can animate (2020)
#26None 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…
This reminds me of the time I removed tyres from my car’s wheels. I want the predictability of my horse drawn cart back. A wheel breaks, I just take a hammer and some nails to it. Galvanised rubber and metallurgy is something I don’t understand so it must be bad.
Re: Surprising things that CSS can animate (2020)
#27Yeah, 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)
Why the weird cypher requirements? Blocking like 65% of users seems like a very weird choice.
Re: Surprising things that CSS can animate (2020)
#28> 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...
Thanks for mentioning this, I never knew you could do this, that would make my hacky CSS+JS animations a lot less hacky :D.
Re: Surprising things that CSS can animate (2020)
#29The path to shit started with the `` GI.
Re: Surprising things that CSS can animate (2020)
#30Earlier quoted context omitted.
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
Probably because: "i did something unspecified and now it doesn't work" is kind of an annoying comment. More to the point, nobody promised that the page doesn't use javascript, just that the techniques presented do not need js in principle.