CSS: I made a full-page div that shifts from 1 opacity to 0, in order to show in a smooth way the content underneath it. Why does the rendering lag (it does not feel smooth)?

Answer 1

Did you try using a "transition" CSS property? You can set how long you want the opacity to fade so it looks smooth. Here's an example:

Hope this helps!

div {

/* set original opacity before transition */

opacity: 1;

/* full transition properties */

transition-delay: 0.3s;

transition-duration: 0.5s;

transition-property: opacity;

transition-timing-function: ease-in-out;

/* or use the transition shorthand */

transition: opacity 0.5s ease-in-out 0.3s;

/* you can mess around with the values until you find something that suits what you're looking for */

}

/* then use one of the css pseudo-classes to trigger the transition */

/* div:hover, div:active, etc. */

div:hover {

opacity: 0;

}