Shake Animation
FREE
A shake animation for alerts or notifications
Demo
Exclusive Launch 50% offspots left: 0 / 50
$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.
@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.
