Article Categories

Selected Reading

Fade Out Right Animation Effect with CSS

CSS Web Development Front End Technology

The CSS Fade Out Right Animation Effect creates a smooth transition where an element gradually becomes transparent while moving to the right until it completely disappears. This effect combines opacity changes with horizontal translation using CSS keyframes.

Syntax

@keyframes fadeOutRight {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(20px);
    }
}

.element {
    animation: fadeOutRight duration timing-function;
}

Example: Basic Fade Out Right Effect

The following example demonstrates a fade out right animation on a colored box −

<!DOCTYPE html>
<html>
<head>
<style>
    .box {
        width: 150px;
        height: 100px;
        background-color: #3498db;
        margin: 50px auto;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        border-radius: 10px;
    }

    .animated {
        animation-duration: 2s;
        animation-fill-mode: both;
    }

    @keyframes fadeOutRight {
        0% {
            opacity: 1;
            transform: translateX(0);
        }
        100% {
            opacity: 0;
            transform: translateX(50px);
        }
    }

    .fadeOutRight {
        animation-name: fadeOutRight;
    }
</style>
</head>
<body>
    <div class="box animated fadeOutRight">Fade Out Right</div>
    <button onclick="location.reload()">Replay Animation</button>
</body>
</html>

A blue box with "Fade Out Right" text appears and gradually fades out while moving 50px to the right over 2 seconds. A "Replay Animation" button allows you to restart the effect.

Example: Multiple Elements with Delay

This example shows multiple elements with staggered fade out right animations −

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 30px;
    }

    .item {
        width: 200px;
        height: 60px;
        background: linear-gradient(45deg, #e74c3c, #f39c12);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        font-weight: bold;
    }

    @keyframes fadeOutRight {
        0% {
            opacity: 1;
            transform: translateX(0);
        }
        100% {
            opacity: 0;
            transform: translateX(100px);
        }
    }

    .item:nth-child(1) {
        animation: fadeOutRight 3s ease-out 0s both;
    }

    .item:nth-child(2) {
        animation: fadeOutRight 3s ease-out 0.5s both;
    }

    .item:nth-child(3) {
        animation: fadeOutRight 3s ease-out 1s both;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

Three gradient boxes appear vertically stacked. They fade out to the right one after another with 0.5-second delays, creating a cascading effect where Item 1 starts immediately, Item 2 starts after 0.5s, and Item 3 starts after 1s.

Key Properties

Property	Description	Example Value
`opacity`	Controls transparency (1 = visible, 0 = invisible)	`0`
`transform: translateX()`	Moves element horizontally	`translateX(20px)`
`animation-duration`	Sets animation speed	`2s`
`animation-fill-mode`	Maintains final state after animation	`both`

Conclusion

The fade out right animation effect is perfect for exit transitions and removing elements smoothly. By combining opacity and translateX transforms, you create an elegant disappearing effect that moves elements off-screen to the right.

Samual Sam

Updated on: 2026-03-15T11:42:50+05:30

170 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next