# elrumordelaluz/csshake

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/elrumordelaluz-csshake).**

_How this analysis was created: the description and tags below were written by an AI model that read this project's README and public documentation pages; stars, license and language come straight from the GitHub API. The model does not read the source code._

4,881 stars · 598 forks · SCSS · MIT

## Links

- GitHub: https://github.com/elrumordelaluz/csshake
- Homepage: https://elrumordelaluz.github.io/csshake/
- awesome-repositories: https://awesome-repositories.com/repository/elrumordelaluz-csshake.md

## Topics

`animation` `css` `csshake` `dom` `keyframe-animation` `mixins` `sass` `shaking-animations`

## Description

csshake is a CSS animation library and framework designed to create shaking, vibrating, and oscillating movement effects on DOM elements. It functions as a UI feedback component that uses visual motion patterns to signal errors or draw user attention through irregular element movement.

The library provides multi-axis shake effects, including horizontal, vertical, and rotational motion patterns. These are implemented through class-based triggering mechanisms that allow for the delivery of error-signaling patterns and other attention-grabbing effects.

The system covers a range of animation controls, including state management for freezing elements, parent-driven triggers, and persistence configurations to determine if an animation repeats or stops. It also supports interactive styling through hover interactions and parent-child animation propagation.

## Tags

### Graphics & Multimedia

- [Error Feedback Animations](https://awesome-repositories.com/f/graphics-multimedia/custom-animation-effects/input-event-animations/error-feedback-animations.md) — Implements visual motion effects, specifically shaking, to signal validation errors and invalid input in UI fields.
- [CSS Animation Classes](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/animation-tools/ui-motion-frameworks/css-animation-classes.md) — Provides a library of pre-built shaking effects applied to DOM elements via CSS class names.
- [Custom Animation Effects](https://awesome-repositories.com/f/graphics-multimedia/custom-animation-effects.md) — Provides a framework for defining unique, user-specified motion behaviors including distance and rotation. ([source](https://cdn.jsdelivr.net/gh/elrumordelaluz/csshake@master/README.md))
- [Multi-Axis Motion Effects](https://awesome-repositories.com/f/graphics-multimedia/multi-axis-motion-effects.md) — Provides horizontal, vertical, and rotational motion patterns to create complex visual shake effects. ([source](http://elrumordelaluz.github.io/csshake/))

### Part of an Awesome List

- [CSS Animation Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/css-animation-libraries.md) — Functions as a framework for implementing native CSS animations to control element movement and rotation.
- [动画(Animate)](https://awesome-repositories.com/f/awesome-lists/more/animate.md) — Listed in the “动画(Animate)” section of the Awesome Frontend awesome list.

### User Interface & Experience

- [CSS Animation Utilities](https://awesome-repositories.com/f/user-interface-experience/animation-libraries/css-animation-utilities.md) — Ships a collection of CSS utilities for creating shaking and oscillating effects using native keyframe animations.
- [CSS Keyframe Declarations](https://awesome-repositories.com/f/user-interface-experience/css-keyframe-declarations.md) — Defines global CSS keyframe rules to create repetitive shaking and oscillating motion patterns.
- [Class-Based Animation Triggers](https://awesome-repositories.com/f/user-interface-experience/lifecycle-animation-triggers/class-based-animation-triggers.md) — Enables the activation of shaking movements by applying specific CSS classes to DOM elements. ([source](https://cdn.jsdelivr.net/gh/elrumordelaluz/csshake@master/README.md))
- [Attention-Seeking Effects](https://awesome-repositories.com/f/user-interface-experience/motion-libraries/attention-seeking-effects.md) — Implements rhythmic and irregular motion patterns specifically designed to draw user focus to interface elements.
- [Feedback and Overlay Components](https://awesome-repositories.com/f/user-interface-experience/ui-components/feedback-overlay-components.md) — Provides visual motion patterns as contextual feedback components to signal errors or grab attention.
- [Animation State Management](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/configuration-utility-helpers/animation-configuration/playback-lifecycle-controllers/animation-state-management.md) — Implements tools for managing animation playback states, including the ability to freeze elements. ([source](http://elrumordelaluz.github.io/csshake/))
- [Animation Fill Modes](https://awesome-repositories.com/f/user-interface-experience/animation-fill-modes.md) — Uses CSS animation-fill-mode properties to determine if elements return to original positions or remain frozen.
- [Interactive Playback](https://awesome-repositories.com/f/user-interface-experience/animation-frameworks/animation-playback-controls/interactive-playback.md) — Provides mechanisms for executing shake animations based on real-time user interactions such as hovering.
- [Pseudo-Class Interactions](https://awesome-repositories.com/f/user-interface-experience/css-selectors/pseudo-class-interactions.md) — Utilizes pseudo-classes like :hover to modify animation playback and pausing behavior.
- [Custom Element Animations](https://awesome-repositories.com/f/user-interface-experience/custom-element-animations.md) — Enables creation of tailored movement patterns including rotation and distance for dynamic web page components.