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

Rotate Out Down Left Animation Effect with CSS

CSS Web Development Front End Technology

The CSS rotate out down left animation effect creates a rotating exit animation where an element rotates 90 degrees clockwise around its bottom-left corner while fading out. This animation is commonly used for dramatic exit effects in web interfaces.

Syntax

@keyframes rotateOutDownLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(0deg);
        opacity: 1;
    }
    100% {
        transform-origin: left bottom;
        transform: rotate(90deg);
        opacity: 0;
    }
}

.element {
    animation-name: rotateOutDownLeft;
    animation-duration: 1s;
    animation-fill-mode: both;
}

Example

The following example demonstrates the rotate out down left animation effect −

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        margin: 20px 0;
    }
    
    .animated-box {
        width: 150px;
        height: 100px;
        background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-family: Arial, sans-serif;
        font-weight: bold;
        animation: rotateOutDownLeft 2s ease-in-out infinite;
    }
    
    @keyframes rotateOutDownLeft {
        0% {
            transform-origin: left bottom;
            transform: rotate(0deg);
            opacity: 1;
        }
        100% {
            transform-origin: left bottom;
            transform: rotate(90deg);
            opacity: 0;
        }
    }
    
    .restart-btn {
        padding: 10px 20px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 14px;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="animated-box">Rotating Box</div>
    </div>
    
    <div style="text-align: center;">
        <button class="restart-btn" onclick="location.reload()">Restart Animation</button>
    </div>
</body>
</html>

A colorful gradient box appears and continuously rotates 90 degrees clockwise around its bottom-left corner while fading out, then repeats the animation.

Key Properties

Property Purpose
transform-origin: left bottom Sets rotation point to bottom-left corner
transform: rotate(90deg) Rotates element 90 degrees clockwise
opacity: 0 Fades element to transparent
animation-fill-mode: both Applies both start and end keyframe styles

Conclusion

The rotate out down left animation creates an elegant exit effect by rotating elements around their bottom-left corner while fading out. It's perfect for removing elements with a smooth, attention-grabbing transition.

Updated on: 2026-03-15T11:56:10+05:30

87 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements