CSS animation / transition for display none/block property

CSS
#1

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;

#2

Could you animate opacity?

1 Like
#3

Yes opacity along with visibility.

#4

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

#5

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?