Article Categories

Selected Reading

Fade In Left Animation Effect with CSS

CSS Web Development Front End Technology

The CSS Fade In Left animation effect creates a smooth transition where an element slides in from the left while gradually becoming visible. This animation combines opacity changes with horizontal movement to create an elegant entrance effect.

Syntax

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

.element {
    animation: fadeInLeft duration ease-in-out;
}

How It Works

The fade in left effect works by −

Starting state: Element is invisible (opacity: 0) and positioned 20px to the left
Ending state: Element becomes fully visible (opacity: 1) and moves to its original position
Transition: Smooth animation between these two states

Example

The following example demonstrates the fade in left animation effect −

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        padding: 50px;
        text-align: center;
    }
    
    .animated {
        width: 200px;
        height: 100px;
        background-color: #3498db;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 20px auto;
        border-radius: 10px;
        animation-duration: 2s;
        animation-fill-mode: both;
    }

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

    .fadeInLeft {
        animation-name: fadeInLeft;
    }
    
    .btn {
        padding: 10px 20px;
        background-color: #2ecc71;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 20px;
    }
</style>
</head>
<body>
    <div class="container">
        <div id="animated-box" class="animated fadeInLeft">
            Fade In Left Effect
        </div>
        <button class="btn" onclick="restartAnimation()">Restart Animation</button>
    </div>

    <script>
        function restartAnimation() {
            const box = document.getElementById('animated-box');
            box.style.animation = 'none';
            setTimeout(() => {
                box.style.animation = 'fadeInLeft 2s both';
            }, 10);
        }
    </script>
</body>
</html>

A blue box with white text "Fade In Left Effect" slides in from the left while fading in over 2 seconds. A green "Restart Animation" button appears below that can replay the effect.

Key Properties

Property	Purpose	Value
`opacity`	Controls visibility	0 (invisible) to 1 (fully visible)
`transform: translateX()`	Controls horizontal position	Negative values move left, positive move right
`animation-duration`	Controls speed	Time in seconds (s) or milliseconds (ms)
`animation-fill-mode`	Maintains final state	`both` applies styles before and after animation

Conclusion

The fade in left animation is perfect for creating smooth entrance effects in web interfaces. By combining opacity and transform properties, you can create engaging visual transitions that enhance user experience.

Samual Sam

Updated on: 2026-03-15T11:36:26+05:30

217 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next