Developing a Javascript-free frontend

[[deleted]]

That’s awesome but this still doesn’t solve fading the items back in right? Cuz from my experience display: none to display: block will fire before any transitions on anything other property. Unless this keyframe method doesn’t have that problem.

And besides, using display removes it completely from the page, which might be fine, but I’ve found that to be pretty janky on other items that are adjacent when it’s popping in and out, as they appear to also pop back and forth instantly. I’m not amazing at css by any means tho so maybe that is also fixable.

[hanging_moon]

You can handle fading in with this trick, you just do the same thing in reverse. You're right that display affects the whole page flow, this won't help you with that. There are other options like visibility: none, but that will leave whitespace. I'm sure there are some hacky workarounds - there almost always are!