Article Categories

Selected Reading

Fade In Down Animation Effect with CSS

CSS Web Development Front End Technology

The CSS Fade In Down animation effect creates a smooth transition where an element gradually appears while moving downward from its starting position. This animation combines opacity changes with vertical translation to create an elegant entrance effect.

Syntax

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-distance);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

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

How It Works

The fade in down effect works by combining two CSS properties:

opacity: Controls the visibility from transparent (0) to fully visible (1)
transform: translateY(): Moves the element vertically from above to its final position

Example: Basic Fade In Down Animation

The following example demonstrates a fade in down animation applied to a text box −

<!DOCTYPE html>
<html>
<head>
<style>
    .animated-box {
        width: 300px;
        height: 150px;
        background: linear-gradient(45deg, #3498db, #2ecc71);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: bold;
        border-radius: 10px;
        margin: 50px auto;
        animation: fadeInDown 2s ease-out;
    }

    @keyframes fadeInDown {
        0% {
            opacity: 0;
            transform: translateY(-30px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .reload-btn {
        display: block;
        margin: 20px auto;
        padding: 10px 20px;
        background-color: #e74c3c;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
</style>
</head>
<body>
    <div class="animated-box">
        Fade In Down Effect
    </div>
    <button class="reload-btn" onclick="location.reload()">Replay Animation</button>
</body>
</html>

A gradient blue-green box with white text "Fade In Down Effect" animates from above, starting transparent and moving down 30px while fading in over 2 seconds. A red "Replay Animation" button appears below to restart the effect.

Example: Multiple Elements with Staggered Animation

This example shows multiple elements with delayed fade in down animations −

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        max-width: 600px;
        margin: 50px auto;
        padding: 20px;
    }

    .card {
        background: white;
        padding: 20px;
        margin: 15px 0;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        animation: fadeInDown 1s ease-out both;
    }

    .card:nth-child(1) { animation-delay: 0.2s; }
    .card:nth-child(2) { animation-delay: 0.4s; }
    .card:nth-child(3) { animation-delay: 0.6s; }

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

    h3 {
        color: #2c3e50;
        margin: 0 0 10px 0;
    }

    p {
        color: #7f8c8d;
        margin: 0;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="card">
            <h3>Card One</h3>
            <p>This is the first card with a 0.2s delay.</p>
        </div>
        <div class="card">
            <h3>Card Two</h3>
            <p>This is the second card with a 0.4s delay.</p>
        </div>
        <div class="card">
            <h3>Card Three</h3>
            <p>This is the third card with a 0.6s delay.</p>
        </div>
    </div>
</body>
</html>

Three white cards with subtle shadows appear in sequence, each fading in from above with increasing delays (0.2s, 0.4s, 0.6s), creating a cascading animation effect.

Key Properties

Property	Purpose	Typical Values
`opacity`	Controls visibility	0 to 1
`transform: translateY()`	Vertical movement	-20px to -50px initially
`animation-duration`	Animation speed	0.5s to 2s
`animation-delay`	Staggered timing	0s to 1s+

Conclusion

The fade in down animation creates smooth, professional entrance effects by combining opacity and vertical translation. Use animation delays to create staggered effects for multiple elements, enhancing user experience with subtle motion design.

Arjun Thakur

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

269 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next