Ask any question about CSS here... and get an instant response.

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.

✅ Answered with CSS best practices.

Ask any question about CSS here... and get an instant response.

How can I make an element fade in using a CSS transition?

Asked on Oct 03, 2025

Answer

The Q&A Network