CSS can achieve a fade-in effect during page loading by defining keyframe animations (@keyframes). First, set the initial state to have the element's opacity at 0 (fully transparent), then gradually increase the opacity to 1 (fully opaque) over time. This creates a fade-in effect where the element gradually becomes visible as the page loads.
Here is a simple example:
/* Define the fade-in keyframes */ @keyframes fadeIn { from { opacity: 0; /* Initial opacity set to 0 */ } to { opacity: 1; /* Final opacity set to 1 */ } } /* Apply to page elements */ .element-to-fade-in { opacity: 0; /* Initial opacity set to 0 */ animation: fadeIn 2s ease-in forwards; /* Apply fade-in effect with 2-second duration, ease-in timing function, and forwards fill mode to maintain the final state */ }
In the above CSS, the .element-to-fade-in class should be applied to HTML elements requiring the fade-in effect. The animation property specifies the animation name (fadeIn), duration (2s), timing function (ease-in), and a forwards fill mode, which keeps the element at its final state after the animation completes.
When the page loads and the element is rendered, the animation starts automatically, transitioning the element from fully transparent to fully opaque to achieve the fade-in effect.
To ensure immediate animation start upon page load, include the CSS within the <head> tag or use inline styles. Additionally, verify no other CSS rules override your fade-in settings.
For multiple elements requiring this effect, apply the class to all relevant elements or target a shared parent element to animate all child elements together.
Note that CSS animation support depends on browser compatibility, but modern browsers generally support CSS3 keyframe animations.