Article Categories

Selected Reading

Fade In Right Big Animation Effect with CSS

CSS Web Development Front End Technology

The CSS Fade In Right Big animation effect creates a dramatic entrance where elements start completely transparent and positioned far off-screen to the right, then smoothly animate to full opacity while sliding into their final position.

Syntax

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

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

Example: Basic Fade In Right Big Effect

The following example demonstrates the fade in right big animation on a colored box −

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        margin: 20px;
        overflow: hidden;
    }
    
    .animated-box {
        width: 200px;
        height: 100px;
        background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        border-radius: 10px;
        animation: fadeInRightBig 2s ease-out;
    }

    @keyframes fadeInRightBig {
        0% {
            opacity: 0;
            transform: translateX(2000px);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }
</style>
</head>
<body>
    <div class="container">
        <div class="animated-box">Fade In Right Big</div>
    </div>
</body>
</html>

A colorful box with gradient background slides in from far right off-screen while fading from transparent to fully visible over 2 seconds.

Example: Multiple Elements with Delays

This example shows multiple elements animating with different delays to create a staggered effect −

<!DOCTYPE html>
<html>
<head>
<style>
    .card-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 20px;
        overflow: hidden;
    }
    
    .card {
        width: 300px;
        padding: 20px;
        background-color: #2c3e50;
        color: white;
        border-radius: 8px;
        animation: fadeInRightBig 1.5s ease-out;
    }
    
    .card:nth-child(1) { animation-delay: 0s; }
    .card:nth-child(2) { animation-delay: 0.3s; }
    .card:nth-child(3) { animation-delay: 0.6s; }

    @keyframes fadeInRightBig {
        0% {
            opacity: 0;
            transform: translateX(2000px);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }
</style>
</head>
<body>
    <div class="card-container">
        <div class="card">Card 1: First to animate</div>
        <div class="card">Card 2: Follows with delay</div>
        <div class="card">Card 3: Last to animate</div>
    </div>
</body>
</html>

Three dark cards appear one by one from the right side with a staggered timing effect, each sliding in 0.3 seconds after the previous one.

Key Properties

Property	Purpose	Typical Value
`opacity`	Controls visibility during animation	0 to 1
`transform: translateX()`	Handles horizontal movement	2000px to 0
`animation-duration`	Controls animation speed	1s to 3s
`animation-delay`	Delays animation start	0s to 1s

Conclusion

The fadeInRightBig animation creates an impressive entrance effect by combining opacity and large horizontal translation. Use animation delays to create sophisticated staggered animations for multiple elements.

karthikeya Boyini

Updated on: 2026-03-15T11:32:38+05:30

169 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next