Shake Animation

FREE

A shake animation for alerts or notifications

Demo

Blur In
Exclusive Launch 50% offspots left: 0 / 50
3D Cube - happy face3D Cube - Happy Face
$39.99

$19.99

Payment once and get lifetime access
Access to all animations
All updates
All animations
No subscriptions

Installation

1

Copy and paste the following code into your project.

Add the class animate-shake to the element you want to animate.

global.css

@layer utilities {
    // START HERE ------------------------------------------------------------
    .animate-shake {
        animation: shake 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    }

    @keyframes shake {
        0%, 100% {
            transform: translateX(0);
        }
        10%, 30%, 50%, 70%, 90% {
            transform: translateX(-5px);
        }
        20%, 40%, 60%, 80% {
            transform: translateX(5px);
        }
     }
    // END HERE ------------------------------------------------------------
}
2

Use the class animate-shake to apply the animation to an element.