How can I make an element fade in using a CSS transition?
Asked on Oct 03, 2025
Answer
To make an element fade in using a CSS transition, you can utilize the `opacity` property along with the `transition` property to smoothly change the element's visibility from hidden to visible.
<!-- BEGIN COPY / PASTE -->
<style>
.fade-in {
opacity: 0;
transition: opacity 2s ease-in;
}
.fade-in.visible {
opacity: 1;
}
</style>
<div class="fade-in" id="myElement">Hello, I will fade in!</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("myElement").classList.add("visible");
});
</script>
<!-- END COPY / PASTE -->Additional Comment:
- The `opacity` property controls the transparency of the element, with 0 being fully transparent and 1 being fully opaque.
- The `transition` property specifies the duration and timing function of the transition effect.
- In this example, JavaScript is used to add the "visible" class after the page loads, triggering the fade-in effect.
- You can adjust the transition duration and timing function to suit your design needs.
Recommended Links: