How to fade color after page download

[codeispoetry]

Is it possible with CSS to fade background color in 4 seconds to white after page download?

.someclass {
  background-color: #FFF6DB;
}

[veocode]

I think there is no way to detect page lifecycle events with CSS only.

The closest solution is to put <style> tag at the very bottom of the page, right above closing </body> tag. It won’t guarantee that all of the contents (except HTML itself) are already loaded, though.

[PaulOB]

You will need to use a keyframe rule to make the fade but bear in mind what @veocode said above.

If you are adding that new class after the document has loaded using js then you can use a transition for the fade instead of a keyframe.

[codeispoetry]

Sir, If I add an extra class after DOM is loaded then by what programming logical can the transition element fade the color?

[PaulOB]

@codeispoetry

.someclass {
  background-color: #FFF6DB;
}

You put the transition on the default state of the element along with its starting colour.

 .myClass{
  background-color: red;
transition: background 3s ease;
}

Then when the page is loaded you get js to add your new class to that element and the transition will occur.

[PaulOB]

Or with keyframe which may be more controllable.