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

add this css ;

.fade:not(.show) {
    opacity: 1;
}

this work for me..