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

Hinge Animation Effect with CSS

CSS Web Development Front End Technology

The CSS hinge animation effect simulates a door-like swinging motion that ends with the element falling off the screen. This animation is commonly used for exit effects or removing elements with a realistic physics-based movement.

Syntax

.element {
    animation-name: hinge;
    animation-duration: 2s;
    animation-fill-mode: both;
}

@keyframes hinge {
    /* Animation keyframes */
}

How Hinge Animation Works

The hinge animation consists of three main phases −

  • Swing phase: Element rotates back and forth around its top-left corner
  • Pause phase: Brief moment before falling
  • Drop phase: Element falls down while fading out

Example

The following example creates a hinge animation effect on a colored box −

<!DOCTYPE html>
<html>
<head>
<style>
    .hinge-box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        margin: 50px;
        animation: hinge 2s ease-in-out;
        animation-fill-mode: both;
    }

    @keyframes hinge {
        0% {
            transform: rotate(0);
            transform-origin: top left;
            animation-timing-function: ease-in-out;
        }
        20%, 60% {
            transform: rotate(80deg);
            transform-origin: top left;
            animation-timing-function: ease-in-out;
        }
        40% {
            transform: rotate(60deg);
            transform-origin: top left;
            animation-timing-function: ease-in-out;
        }
        80% {
            transform: rotate(60deg) translateY(0);
            opacity: 1;
            transform-origin: top left;
        }
        100% {
            transform: translateY(300px);
            opacity: 0;
        }
    }

    button {
        margin: 20px;
        padding: 10px 20px;
        background-color: #2ecc71;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
</style>
</head>
<body>
    <div class="hinge-box"></div>
    <button onclick="location.reload()">Restart Animation</button>
</body>
</html>

A blue box swings back and forth like a door hinge, then falls down while fading out. A green button allows restarting the animation.

Key Properties

Property Purpose
transform-origin: top left Sets the pivot point for rotation
animation-timing-function Controls the speed curve of rotation
translateY() Makes the element fall down
opacity: 0 Fades out the element as it falls

Conclusion

The hinge animation creates a realistic door-swinging effect that's perfect for exit animations. By combining rotation, translation, and opacity changes, it provides a smooth physics-based motion that enhances user experience.

Updated on: 2026-03-15T11:51:45+05:30

189 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements