Surprising things that CSS can animate (2020)

https://codersblock.com/blog/the-surprising-things-that-css-can-animate/

by asicsp • 4 years ago

295 47 4 years ago

rglzr• 4 years ago

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.

dx034• 4 years ago

They didn’t work for me on Safari mobile.

Jolter• 4 years ago

They do for me, on iOS 16.2. Are you using any content blocker that might interfere?

egberts13• 4 years ago

Yeah, 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)

chrisweekly• 4 years ago

Nice website (not just the cool animated motto).

mashpoe• 4 years ago

It's weird being able to highlight animated text like this

thatguy09002• 4 years ago

It's very cool that on Android the text selecting tabs will even rotate around too with the text

IshKebab2• 4 years ago

Why the weird cypher requirements? Blocking like 65% of users seems like a very weird choice.

egberts13• 4 years ago

Weird because that's the strongest setting used with the fewest (zero) vulnerabilities there.

culi• 4 years ago

The most amazing imo is the `d` attribute of an svg <path> element

themoonisachees• 4 years ago

Fun fact about SVGs: you can drop-shadow an SVG and it will work fine. See https://poggers.website

metters• 4 years ago

Reminds me of this blog post https://www.joshwcomeau.com/animation/css-transitions/

63• 4 years ago

I 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_gril2• 4 years ago

This is a beautifully done blog. The author works at Square, according to his info page: https://codersblock.com/about/

gfat2• 4 years ago

https://medium.com/bridge-collection/3d1b0a9b810e Stripe using animations back in 2014.

nicbou2• 4 years ago

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.

TuringTest2• 4 years ago

You 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.

dmitriid2• 4 years ago

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.

sibit• 4 years ago

Well, many of those animations like opacity changes [...] undoubtedly force the browser to re-layout and repaint the entire screen anyway.

Depends on the rendering engine. With Blink opacity, filter, and transform will skip past layout and paint after the first render.

Chrome Dev Summit 2018: https://youtu.be/AB9qSUhlxh8?t=754

thatguy09002• 4 years ago

Half of these don't work on safari even in a isolated demo. Compatability is probably a big reason

circustaco• 4 years ago

What do you think of The Pudding (https://pudding.cool/)? They make beautiful “visual essays”. Unlike some fanciful animated sites, I feel like The Pudding’s design and animation complement the text to make the result ‘greater than the sum of its parts.

hot_gril2• 4 years ago

Not the only surprising thing about CSS.

philistine• 4 years ago

I watched all of those animations on Safari. The constant reminder that you wouldn't see anything on Safari had me doubt my sanity.

brundolf• 4 years ago

It's because the post is from 2020

bouke• 4 years ago

The only thing that didn't appear to work for me was the code selection. It would only allow selecting the whole code block, and not toggle to allow selecting only a portion. Other than that the animations appeared fine to me as well.

plusminusplus• 4 years 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• 4 years ago

There's also a way to do it on exactly the right frame: https://developer.mozilla.org/en-US/docs/Web/API/Element/tra...

beebeepka2• 4 years ago

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

M4v3R• 4 years ago

Thanks for mentioning this, I never knew you could do this, that would make my hacky CSS+JS animations a lot less hacky :D.

autoexec4• 4 years ago

None 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.

gfat2• 4 years 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.

autoexec4• 4 years ago

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.

sjcsjc• 4 years ago

"Doctor, it hurts when I do this"

...

gherkinnn• 4 years ago

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.

autoexec4• 4 years ago

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.

I understand CSS and I've done a fair bit of webdesign myself. CSS has evolved to the point where it can be used abusively. Hell, some consider it turing complete (https://github.com/brandondong/css-turing-machine).

CSS can be used for ads, fingerprinting, and exploits. There are perfectly valid reasons for wanting a little less functionality while still allowing for some basic styling.

I mean, it's cool that there are computer games written in pure CSS and other neat tricks, but sometimes you just want a browser to behave itself even in hostile spaces. If that makes my heavily locked down browser a "horse drawn cart" I'm happy to trot forward.

ehecatl42• 4 years ago

The path to shit started with the `<blink>` GI.

drowsspa• 4 years ago

Those 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• 4 years ago

That's usually the point of fashion

Meta-fashionistas add a deliberate Stilbruch (style-break)

Surprising things that CSS can animate (2020)

Related Stories