6 ms·
Surprising things that CSS can animate (2020)
- rglzr 4y agoInteresting how so many of these didn't work in Safari in 2020, but all of them do now. Good progress for interoperability, I guess.
- egberts1 4y agoYeah, I too had fun with CSS and curvy circular text animation. https://egbert.net/blog/index.html https://egbert.net/blog/index.html (Sorry, web access is only HTTP/1.1-3, TLSv1.3 and ChaCha-only, no Chrome access possible)
- chrisweekly 4y agoNice website (not just the cool animated motto).
- mashpoe 4y agoIt's weird being able to highlight animated text like this
- thatguy0900 4y agoIt's very cool that on Android the text selecting tabs will even rotate around too with the text
- IshKebab 4y agoWhy the weird cypher requirements? Blocking like 65% of users seems like a very weird choice.
- egberts1 4y agoWeird because that's the strongest setting used with the fewest (zero) vulnerabilities there.
- culi 4y agoThe most amazing imo is the `d` attribute of an svg <path> element
- themoonisachees 4y agoFun fact about SVGs: you can drop-shadow an SVG and it will work fine. See https://poggers.website https://poggers.website
- metters 4y agoReminds me of this blog post https://www.joshwcomeau.com/animation/css-transitions/ https://www.joshwcomeau.com/animation/css-transitions/
- hot_gril 4y agoNot the only surprising thing about CSS.
- 63 4y agoI 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?
- hot_gril 4y agoThis is a beautifully done blog. The author works at Square, according to his info page: https://codersblock.com/about/ https://codersblock.com/about/
- gfat 4y agohttps://medium.com/bridge-collection/3d1b0a9b810e https://medium.com/bridge-collection/3d1b0a9b810e Stripe using animations back in 2014.
- nicbou 4y agoIf 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.
- TuringTest 4y agoYou can have exquisite presentation with good choices of text, formatting and typography (including judicious use of colour, spacing and even animation and textures). A luxury printed book full of beautiful details will feel much better than a cheap paperback. The best techniques can be applied in subtle ways to improve the overall presentation, without resorting to flashy showcases.
- nicbou 4y agoI agree with you. I'd love to see good examples of that, because I struggle to create that sort of websites. For example, how would you redesign the Python docs to feel like a beautifully typeset book does?
- philistine 4y agoI watched all of those animations on Safari. The constant reminder that you wouldn't see anything on Safari had me doubt my sanity.
- plusminusplus 4y ago> 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!
- CGamesPlay 4y agoThere's also a way to do it on exactly the right frame: https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event https://developer.mozilla.org/en-US/docs/Web/API/Element/tra...
- autoexec 4y agoNone 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.
- gfat 4y ago> 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.
- autoexec 4y agoCodepen 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.
- beebeepka 4y agoNot 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
- bawolff 4y agoProbably 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.
- ehecatl42 4y agoThe path to shit started with the `<blink>` GI.
- drowsspa 4y agoThose CSS animations would be a success in the web of the old days. Reminds me of the whole rounded borders thing: all those hacks and loops to make it work in all browsers (transparent images in the corners, lol), and then finally when there's wide browser support, rounded borders were already out of fashion
- 082349872349872 4y agoThat's usually the point of fashion Meta-fashionistas add a deliberate Stilbruch (style-break)