About CSShake
Overview
CSShake is a CSS library that provides ready-made classes to apply shake animations to DOM elements. Instead of writing custom keyframes, developers simply add a CSS class like shake or shake-hard to any element.
It solves the problem of creating consistent shake effects without custom animation code. The library is built with Sass and is aimed at front-end developers who want quick, configurable shake animations for UI interactions or visual effects.
Key Benefits
- Apply ten distinct shake animations (basic, slow, little, hard, horizontal, vertical, rotate, opacity, crazy, chunk) with a single CSS class.
- Trigger animations from a parent element using the shake-trigger class.
- Freeze the animation at the current position on :hover using the shake-freeze variant.
- Make animations constant and stop them only on :hover with the shake-constant--hover variant.
- Create fully custom shake animations via the do-shake Sass mixin, controlling axes, rotation, duration, precision, opacity, and iteration count.
- Load only the specific shake animation files needed by linking individual CSS files such as csshake-slow.min.css.
How It Works
You include the CSS file via a <link> tag from the local install, npm, bower, or the Surge CDN. Then you add a class such as shake, shake-slow, shake-hard, shake-horizontal, shake-vertical, shake-rotate, shake-opacity, shake-crazy, or shake-chunk to any DOM element. For custom animations, you use the do-shake Sass mixin with parameters for x-axis range, y-axis range, rotation, duration, precision, opacity, and chunk percentage, then compile the Sass into CSS.
Use Cases
- Front-end developers creating UI feedback effects for error states or form validation.
- Game developers adding visual impact on hits, collisions, or power-ups in web-based games.
- Design prototyping teams who need to quickly test shake animations without writing custom CSS keyframes.
- Interactive presentation builders adding emphasis animations to slides or elements.
- Hobbyist web designers adding playful or Easter-egg effects to personal sites.
- React developers using the CSShake component wrapper to apply shake animations declaratively.
Why Choose This Product
CSShake is best suited for front-end developers who want zero-JavaScript, CSS-only shake animations with minimal setup. It offers ten pre-built variations and a flexible Sass mixin for custom animations. The library has no documented limitations, but as a pure CSS solution it cannot respond dynamically to runtime data without JavaScript class toggling.
CSShake Pros & Cons
- 10 pre-built shake animation classes
- Customizable via Sass mixin
- Free and open source
- Modular — load only the animations you need
- Supports parent-triggered, constant, freeze, and hover-stop variants
Key Features
Pre-built shake classes
Provides ten ready-to-use CSS shake animation classes including basic, slow, little, hard, horizontal, vertical, rotate, opacity, crazy, and chunk.
Custom mixin parameters
The do-shake Sass mixin accepts parameters for x and y range, rotation, duration, precision, opacity, chunk percentage, and timing function.
Parent-triggered animation
Use the shake-trigger class on a parent element to start animations on matching child elements.
Constant and hover stop
Add shake-constant to keep animation running and shake-constant--hover to stop it when the user hovers.
Freeze on hover
Add the shake-freeze class to freeze the animation at the current frame on hover.
Modular file loading
Include only the animation CSS files you need by referencing individual files like csshake-slow.min.css or csshake-crazy.min.css.
React component support
A React functional component wrapper is available through the CSShake reshake package.
CSShake Pricing
Pricing extracted from the product website and may change. Check the source for current details.