How to Implement Fade Out Transition Using CSS

  2. HowTo
  3. CSS Howtos
  4. How to Implement Fade Out Transition …
Neha Imran Feb 02, 2024
CSS CSS Transition
  1. CSS Fade Transition
  2. Fade Out Using the Animation Property
  3. Fade Out Using the Transition Property
  4. Fade Out Using In-Line CSS
  5. Fade Out Using External CSS
  6. Fade Out Using Dom Events
How to Implement Fade Out Transition Using CSS

In this article, we will learn about fade-out animation and how to implement it using internal, external, and in-line CSS. Later, we’ll look at how to use DOM events to implement fade-out functionality.

CSS Fade Transition

A CSS fade transition is a visual effect in which an element, such as an image, text, or background, appears or disappears gradually on the page.

Either the CSS transition property or the animation property will be used to produce these effects. Using the transition property, you can only specify a starting and final state.

The difference between CSS transitions and animations is that the transitions need a trigger, such as a user hovering over an element, but animations don’t. When the page loads, an animation’s default behavior starts its sequence immediately.

However, you can delay it by using the animation-delay parameter. This article is focused on FadeOut only.

Let’s see how we can achieve the fade-out transition using CSS.

Fade Out Using the Animation Property

As discussed above, fadeOut functionality can be achieved by both transition and animation properties of CSS. Let’s start by creating the functionality using the animation property.

Code:

<html>
    <head>
        <style>
            .fade {
            animation: fadeOut 5s;
         }

         @keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }
        </style>
    </head>
    <body>
        <div class="fade"> Internal CSS Fade Out using Animation !</div>
    </body>
</html>

First, we assign a class fade to the div. All the styling will be done in this class.

We are now heading towards the style tag. The first property we call in the class is the animation: fadeOut 5s, and this property allows you to make creative animations on your web pages.

The fadeOut is the animation name, and 5s is the animation duration which defines the duration an animation should take to complete a cycle. Then we used keyframes on the animation name fadeOut.

The keyframes are used to determine the animation rule. We are specifying that at 0%, the opacity/transparency of the element is 1, which means 100% as the opacity property of the CSS has a value range of 0 to 1, and opacity will be 0 at 100%, meaning the text will appear with complete visibility and fade out slowly.

Fade Out Using the Transition Property

Let’s implement the functionality using the transition property of CSS. The transition property needs a trigger function like hover, focus, etc., to work.

Code:

<html>
    <head>
        <style>
            .fadeOut:hover {
                opacity: 10%;
                transition: opacity 3s;
            }
         }
        </style>
    </head>
    <body>
        <div class="fadeOut"> Internal CSS Fade Out using Transition !</div>
    </body>
</html>

In the above code, we write transition: opacity 3s. The first sub-property of the transition is the transition-property, which specifies the names of the CSS properties to which transitions should be applied.

The second sub-property is the transition-duration, which specifies the duration over which transitions should occur. So, we are simply saying that when a user place cursor on the text, the opacity of the text should become 10% in the given duration.

Fade Out Using In-Line CSS

In-line CSS gives styles to the HTML elements inside their tags. In-line CSS is not recommended as we cannot use all the properties inside the HTML tag.

Code:

<html>
    <head>
        <style>
         @keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }
        </style>
    </head>
    <body>
        <div class="fade" style="animation: fadeOut 5s"> In-line CSS Fade Out !</div>
    </body>
</html>

As we are writing the code using in-line CSS, here the question may be why we didn’t write keyframes inside the div tag. Because keyframes are not part of the HTML elements, they are called on animations.

Fade Out Using External CSS

External style sheets are created in independent files with the .css extension. An external style sheet is a list of CSS rules, and HTML tags cannot be used in it.

An external style sheet can be linked by a link tag, which is placed in the head tag of an HTML page. A single HTML page can utilize as many external style sheets as it likes.

For example, create a file with the name style.css or by any name you want, and copy the style tag code from the above examples into the file. We need to add the CSS file reference to our HTML page.

Code:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="fade">External CSS Fade Out !</div>
    </body>
</html>

Fade Out Using Dom Events

Another method to achieve the fade-out functionality is to use the DOM onMouseOver and onMouseOut events. The onMouseOver event triggers when the mouse pointer is moved onto an element, and the onMouseOut event occurs when the mouse has moved away from the element.

Code:

<html>
    <head></head>
    <body>
        <div class="fadeOut" onMouseOver="this.style.opacity='10%'"onMouseOut="this.style.opacity='100%'">
            I will fade out on mouse hover
        </div>
    </body>
</html>

We set the opacity to 10% for the onMouseOver event. Suppose you want to completely fade out the element and set the opacity to 0.

The text fades out when the cursor is over, as seen in the output, then returns to its original position when removing the cursor.

Related Article - CSS Transition