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

Wobble Animation Effect with CSS

CSS Web Development Front End Technology

The CSS wobble animation effect creates a shaking or oscillating motion by combining horizontal translation and rotation transforms. This effect is commonly used to draw attention to elements or create playful interactions.

Syntax

@keyframes wobble {
    /* Define keyframe percentages with transform values */
}

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

Example: Simple Wobble Animation

The following example creates a wobble effect on a box element −

<!DOCTYPE html>
<html>
<head>
<style>
    .wobble-box {
        width: 100px;
        height: 100px;
        background-color: #ff6b6b;
        margin: 50px auto;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        animation: wobble 1s ease-in-out infinite;
    }

    @keyframes wobble {
        0% { transform: translateX(0%) rotate(0deg); }
        15% { transform: translateX(-25%) rotate(-5deg); }
        30% { transform: translateX(20%) rotate(3deg); }
        45% { transform: translateX(-15%) rotate(-3deg); }
        60% { transform: translateX(10%) rotate(2deg); }
        75% { transform: translateX(-5%) rotate(-1deg); }
        100% { transform: translateX(0%) rotate(0deg); }
    }
</style>
</head>
<body>
    <div class="wobble-box">Wobble</div>
</body>
</html>

A red rounded box with "Wobble" text continuously shakes back and forth with slight rotation, creating an attention-grabbing wobble effect.

Example: Triggered Wobble Animation

This example shows how to trigger the wobble effect on hover −

<!DOCTYPE html>
<html>
<head>
<style>
    .button {
        padding: 15px 30px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
        margin: 50px;
        transition: all 0.3s ease;
    }

    .button:hover {
        animation: wobble 0.8s ease-in-out;
    }

    @keyframes wobble {
        0% { transform: translateX(0%) rotate(0deg); }
        15% { transform: translateX(-10%) rotate(-2deg); }
        30% { transform: translateX(8%) rotate(1deg); }
        45% { transform: translateX(-6%) rotate(-1deg); }
        60% { transform: translateX(4%) rotate(1deg); }
        75% { transform: translateX(-2%) rotate(-0.5deg); }
        100% { transform: translateX(0%) rotate(0deg); }
    }
</style>
</head>
<body>
    <button class="button">Hover me to wobble</button>
</body>
</html>

A green button that wobbles with a shake effect when hovered over, returning to its normal position when the hover ends.

Key Properties

Property Purpose
translateX() Creates horizontal movement
rotate() Adds rotational movement for realistic shake
animation-duration Controls how long the wobble lasts
animation-timing-function Defines the easing of the wobble motion

Conclusion

The wobble animation combines translateX and rotate transforms at different keyframe intervals to create an engaging shake effect. Adjust the translation and rotation values to control the intensity of the wobble.

Updated on: 2026-03-15T11:55:21+05:30

344 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements