How to create shake animation css

CssHow-ToBeginner · 3 min read

How to Create Shake Animation in CSS: Simple Guide

To create a shake animation in CSS, define a @keyframes rule that moves the element left and right quickly, then apply it using the animation property on the element. This makes the element shake by shifting its position repeatedly.

📐

Syntax

The shake animation uses the @keyframes rule to define the movement steps. The animation property applies the animation to an element with settings like duration and iteration count.

@keyframes shake: Defines the shaking movement.
animation: shake 0.5s linear infinite;: Runs the shake animation for 0.5 seconds, smoothly, repeating forever.

css

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}

.shake {
  animation: shake 0.5s linear infinite;
}

💻

Example

This example shows a button that shakes continuously when hovered over. It demonstrates how to use the shake animation with CSS classes.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Shake Animation Example</title>
<style>
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-10px); }
    40%, 80% { transform: translateX(10px); }
  }
  .shake {
    display: inline-block;
    padding: 1rem 2rem;
    font-size: 1.25rem;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  .shake:hover {
    animation: shake 0.5s linear infinite;
    background-color: #0056b3;
  }
</style>
</head>
<body>
<button class="shake" aria-label="Shake button">Shake Me</button>
</body>
</html>

Output

A blue rounded button labeled 'Shake Me' that shakes left and right continuously when hovered over by the mouse.

⚠️

Common Pitfalls

Common mistakes when creating shake animations include:

Not defining 0% and 100% keyframes to reset the position, causing jumpy effects.
Using too large or too fast translations, making the shake look unnatural or causing layout shifts.
Forgetting to set animation-iteration-count or using infinite unintentionally, which can annoy users.
Not using transform for movement, which is more efficient than changing left or margin.

css

/* Wrong: Missing 0% and 100% keyframes causes jump */
@keyframes badShake {
  20%, 60% { transform: translateX(-15px); }
  40%, 80% { transform: translateX(15px); }
}

/* Right: Include 0% and 100% to reset position */
@keyframes goodShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}

📊

Quick Reference

Remember these tips for shake animations:

Use @keyframes with transform: translateX() for smooth movement.
Set animation-duration around 0.3 to 0.6 seconds for natural shake speed.
Use animation-iteration-count wisely; infinite for continuous shake or a fixed number for short effect.
Apply animation on user interaction like :hover or :focus for better UX.

✅

Key Takeaways

Define shake movement using @keyframes with transform: translateX() for smooth left-right shifts.

Apply the animation with the animation property, setting duration and iteration count for control.

Include 0% and 100% keyframes to reset the element's position and avoid jumpy effects.

Use shake animations on user interaction like hover to enhance user experience without annoyance.

Keep shake distance and speed moderate for a natural and pleasant effect.