csscss-animationscss-transitionsfade

Make fadeIn from black css


I've been using keyframes and animations to make my section fade in, but whenever I use opacity, it always fades in from white. How do I make it so my screen starts off as black and fades in to stuff in my section?


Solution

  • Create a black overlay to your element (using an element of same size with position: absolute; top: 0; bottom: 0; left: 0; right: 0; while either the original element is the parent of the overlay with position: relative or their common parent element has position: relative) and fade / transition the opacity value for the overlay the other way round - from 1.0 to 0.