Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Bounce Out Left Animation Effect with CSS

CSS Web Development Front End Technology

The CSS bounce out left animation effect makes an element bounce slightly to the right before sliding out to the left and fading away. This animation creates a dynamic exit effect that's commonly used for removing items or transitioning elements off-screen.

Syntax

selector {
    animation-name: bounceOutLeft;
    animation-duration: duration;
    animation-fill-mode: both;
}

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

Example

The following example demonstrates the bounce out left animation effect −

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
    }
    
    .animated-box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        border-radius: 10px;
        animation: bounceOutLeft 2s ease-in-out;
        animation-fill-mode: both;
    }

    @keyframes bounceOutLeft {
        0% {
            transform: translateX(0);
            opacity: 1;
        }
        20% {
            opacity: 1;
            transform: translateX(20px);
        }
        100% {
            opacity: 0;
            transform: translateX(-2000px);
        }
    }
    
    .restart-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 class="animated-box"></div>
    </div>
    <div style="text-align: center;">
        <button class="restart-btn" onclick="location.reload()">Restart Animation</button>
    </div>
</body>
</html>

A blue square box starts at the center, bounces slightly to the right (20px), then slides rapidly to the left while fading out until it disappears completely off-screen. Click the "Restart Animation" button to replay the effect.

Key Points

  • The animation has three phases: initial position (0%), slight rightward bounce (20%), and final left exit (100%)
  • The translateX(20px) at 20% creates the bounce effect before the exit
  • The translateX(-2000px) ensures the element moves completely off-screen
  • Use animation-fill-mode: both to maintain the final state after animation completes

Conclusion

The bounce out left animation is perfect for creating engaging exit transitions. The subtle bounce before the slide-out adds visual interest and makes the animation feel more natural and dynamic.

Updated on: 2026-03-15T11:45:58+05:30

86 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements