Shake Animation
FREE
A shake animation for alerts or notifications
Demo
PREMIUM
MAX
Acquire the MAX Plan
Unlock unlimited potential with our most advanced features and priority support.
All updates
All animations
No subscriptions
No hidden fees
$19.99
Payment once and get lifetime access
Shake Animation
This is a simple shake animation that can be used for alerts or notifications.
Installation
1
Copy and paste the following code into your project.
Agrega la clase animate-shake al elemento que quieras animar.
global.css
@layer utilities {
.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);
}
}
}
2
Use the class animate-shake to apply the animation to an element.
