By · Updated

CSS Shake Animation

Side-to-Side, Up-and-Down or Wiggle Keyframes for Buttons, Icons and Form Errors

No ratings yet

4 CSS Shake Animation presets to start from

OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.

How the CSS Shake Animation works

This CSS shake animation generator writes the keyframes to shake an element side to side, up and down, or with a rotating wiggle. Play it on hover or on a loop, set the distance and speed, then copy the HTML and CSS.

A short shake is the familiar way to say "no" on a wrong password, and a gentle wiggle draws the eye to a button without a pop-up.

How the CSS shake animation works

The keyframe moves the element back and forth with translate or rotate, getting smaller towards the end so the shake settles rather than stopping dead. Because it only changes transform, it never moves the elements around it and stays smooth on phones.

Shaking a form field on error

Add the shake class to the field when validation fails, then remove it on animationend so it can play again next time. Pair it with a red border and a written error message, because motion alone does not tell everyone what went wrong.

FAQ

How do I make the shake play only once?

Choose On hover, or set animation-iteration-count: 1 on your own class and add that class with JavaScript when you need it. Removing and re-adding the class replays the shake.

What is the difference between shake and wiggle?

A shake moves the element sideways or up and down. A wiggle rotates it a few degrees either way around its centre. Rotate suits icons such as a bell, while a sideways shake suits form errors.

Will the shake bother visitors sensitive to motion?

The copied CSS includes a prefers-reduced-motion rule that turns the shake off for visitors who ask for less motion, so keep an extra visual cue such as a colour change for important states.

See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.

Related tools

Keyframe Animator

Build and preview a CSS @keyframes animation from three stops.

Hover Effect Builder

Build animated hover effects for buttons and links.

CSS Button Generator

Design a button with hover, focus and disabled states.

CSS Bounce Animation

A bouncing ball with optional squash and stretch.

CSS Pulse Animation

A pulsing ring around a button or a live status dot.