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

Rotate In Down Right Animation Effect with CSS

CSS Web Development Front End Technology

The CSS rotate in down right animation effect creates an element that rotates from a 90-degree angle to its normal position while fading in, with the rotation origin set to the bottom right corner of the element.

Syntax

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

.element {
    animation-name: rotateInDownRight;
    animation-duration: duration;
}

Example

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

<!DOCTYPE html>
<html>
<head>
<style>
    .animated {
        width: 200px;
        height: 100px;
        background-color: #3498db;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        animation-duration: 2s;
        animation-fill-mode: both;
    }
    
    @keyframes rotateInDownRight {
        0% {
            transform-origin: right bottom;
            transform: rotate(90deg);
            opacity: 0;
        }
        100% {
            transform-origin: right bottom;
            transform: rotate(0);
            opacity: 1;
        }
    }
    
    .rotateInDownRight {
        animation-name: rotateInDownRight;
    }
    
    .container {
        padding: 50px;
    }
    
    button {
        margin-top: 20px;
        padding: 10px 15px;
        background-color: #2ecc71;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
</style>
</head>
<body>
    <div class="container">
        <div id="animated-example" class="animated rotateInDownRight">
            Rotating Element
        </div>
        <button onclick="myFunction()">Reload Animation</button>
    </div>
    <script>
        function myFunction() {
            location.reload();
        }
    </script>
</body>
</html>

A blue rectangular box with "Rotating Element" text rotates from 90 degrees to 0 degrees while fading in from transparent to opaque. The rotation occurs around the bottom-right corner of the element. A green "Reload Animation" button appears below to restart the effect.

Key Properties

Property Description
transform-origin Sets the rotation point to bottom right corner
transform: rotate() Controls the rotation angle from 90deg to 0deg
opacity Controls the fade-in effect from 0 to 1
animation-duration Sets how long the animation takes to complete

Conclusion

The rotate in down right animation effect combines rotation and opacity changes to create a smooth entrance animation. The element rotates from 90 degrees to its normal position while fading in, using the bottom-right corner as the pivot point for a natural spinning effect.

Updated on: 2026-03-15T11:54:44+05:30

90 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements