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

Rotate Out Down Right Animation Effect with CSS

CSS Web Development Front End Technology

The CSS rotate out down right animation effect rotates an element clockwise while fading it out, with the rotation anchored at the bottom-right corner. This creates a smooth exit animation where the element appears to spin away downward and to the right.

Syntax

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

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

Example

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

<!DOCTYPE html>
<html>
<head>
<style>
    .animated-box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        margin: 50px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        animation: rotateOutDownRight 2s ease-in-out;
    }
    
    @keyframes rotateOutDownRight {
        0% {
            transform-origin: right bottom;
            transform: rotate(0deg);
            opacity: 1;
        }
        100% {
            transform-origin: right bottom;
            transform: rotate(-90deg);
            opacity: 0;
        }
    }
    
    .restart-btn {
        margin: 20px 50px;
        padding: 10px 20px;
        background-color: #2ecc71;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
</style>
</head>
<body>
    <div class="animated-box">BOX</div>
    <button class="restart-btn" onclick="location.reload()">Restart Animation</button>
</body>
</html>

A blue box labeled "BOX" appears and rotates clockwise while fading out, anchored at its bottom-right corner. The element disappears after completing a 90-degree rotation. A green "Restart Animation" button allows you to replay the effect.

Key Properties

Property Value Description
transform-origin right bottom Sets rotation anchor point to bottom-right corner
transform rotate(-90deg) Rotates element 90 degrees clockwise
opacity 0 Fades element to completely transparent

Conclusion

The rotate out down right animation creates an elegant exit effect by combining rotation and fade-out. The bottom-right anchor point gives the animation a natural spinning motion, making it perfect for dismissing UI elements or creating engaging transitions.

Updated on: 2026-03-15T12:00:38+05:30

82 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements