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

Rotate In Animation Effect with CSS

CSS Web Development Front End Technology

The CSS rotate in animation effect creates a smooth spinning motion that rotates an element into view from a specified angle. This animation is commonly used for entrance effects where elements appear to spin into position while fading in.

Syntax

@keyframes rotateIn {
    0% {
        transform: rotate(-200deg);
        opacity: 0;
    }
    100% {
        transform: rotate(0deg);
        opacity: 1;
    }
}

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

Example

Here's how to create a rotate in animation effect −

<!DOCTYPE html>
<html>
<head>
<style>
    .animated {
        width: 150px;
        height: 150px;
        background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
        border-radius: 10px;
        margin: 50px auto;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 20px;
        font-weight: bold;
        animation: rotateIn 2s ease-out;
    }

    @keyframes rotateIn {
        0% {
            transform-origin: center center;
            transform: rotate(-200deg);
            opacity: 0;
        }
        100% {
            transform-origin: center center;
            transform: rotate(0deg);
            opacity: 1;
        }
    }

    .reload-btn {
        display: block;
        margin: 20px auto;
        padding: 10px 20px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
</style>
</head>
<body>
    <div class="animated">Rotate In</div>
    <button class="reload-btn" onclick="location.reload()">Reload Animation</button>
</body>
</html>

A colorful box with gradient background appears on the page, rotating from -200 degrees to 0 degrees while fading in from transparent to fully opaque. A blue reload button allows you to restart the animation.

Key Properties

Property Description
transform-origin Sets the point around which the rotation occurs
transform: rotate() Specifies the rotation angle in degrees
opacity Controls the transparency during animation
animation-duration Sets how long the animation takes to complete

Conclusion

The rotate in animation creates an engaging entrance effect by combining rotation and opacity changes. By adjusting the initial rotation angle and duration, you can customize the intensity and speed of the spinning motion.

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

309 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements