A partial archive of discourse.wicg.io as of Saturday February 24, 2024.

CSS animation / transition for display none/block property

collimarco
2022-05-29

Most elements are added / removed from the UI using a change in the display property.

For example if you want to make an HTML element appear you can add display: block;. Then you can remove it with display: none;. This is very simple and widely used.

It would be nice to have a simple way to make the element fade in / fade out.

Example: transition: display 2s;

simevidas
2022-05-29

Could you animate opacity?

mkay581
2022-05-29

Yes opacity along with visibility.

collimarco
2022-05-30

Thanks, I know that you can use some (slightly more complex) workarounds.

However I was wondering why display: none; doesn’t have a built-in way to be animated (which seems a very common use case).

noamr
2022-05-30

The difference between opacity and display is that display affects positioning/layout and opacity affects only how the element is rendered in its current position.

In terms of rendering, it’s clear what 0.3 opacity means. But in terms of layout, what does it mean that an element is 0.2 block and 0.8 none? How should it be positioned, and how should it affect the position of other elements?