CSS display none and opacity animation with keyframes not working

Question

I have a very basic piece of HTML with the objective of animating from display: none; to display: block with opacity changing from 0 to 1.

Answer 1

The display doesn't work with CSS transition or animation.

Use opacity, visibility or z-index. You can combine all them.

Try to use visibility: visible in place display: block and visibility: hidden in place display: none.

And finally, combine z-index: -1 and z-index: 100 for example.

Good work ;)