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

Rotate Out Up Left Animation Effect with CSS

CSS Web Development Front End Technology

The CSS rotate out up left animation creates a rotating exit effect where an element spins counterclockwise while moving up and left, eventually disappearing from view. This animation is commonly used for exit transitions and attention-grabbing effects.

Syntax

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

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

Example

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

<!DOCTYPE html>
<html>
<head>
<style>
    .animated-box {
        width: 200px;
        height: 200px;
        background-color: #4CAF50;
        margin: 50px auto;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        font-size: 18px;
        animation-duration: 2s;
        animation-fill-mode: both;
    }
    
    @keyframes rotateOutUpLeft {
        0% {
            transform-origin: left bottom;
            transform: rotate(0deg);
            opacity: 1;
        }
        100% {
            transform-origin: left bottom;
            transform: rotate(-90deg);
            opacity: 0;
        }
    }
    
    .rotateOutUpLeft {
        animation-name: rotateOutUpLeft;
    }
    
    .restart-btn {
        display: block;
        margin: 20px auto;
        padding: 10px 20px;
        background-color: #2196F3;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
</style>
</head>
<body>
    <div class="animated-box rotateOutUpLeft">Rotating Out</div>
    <button class="restart-btn" onclick="restartAnimation()">Restart Animation</button>
    
    <script>
        function restartAnimation() {
            const box = document.querySelector('.animated-box');
            box.style.animation = 'none';
            setTimeout(() => {
                box.style.animation = 'rotateOutUpLeft 2s both';
            }, 10);
        }
    </script>
</body>
</html>

A green box appears on the page and immediately begins rotating counterclockwise around its bottom-left corner while fading out, eventually disappearing completely. The "Restart Animation" button allows you to replay the effect.

Key Properties

Property Value Description
transform-origin left bottom Sets rotation point to bottom-left corner
transform rotate(-90deg) Rotates element 90 degrees counterclockwise
opacity 0 to 1 Controls visibility during animation

Conclusion

The rotate out up left animation provides a dynamic exit effect by combining rotation and opacity changes. The transform-origin property is crucial for controlling the rotation point, creating the distinctive up-left movement pattern.

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

88 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements