by elrumordelaluz

elrumordelaluz /csshake

CSS classes to move your DOM!

4.2K Stars 611 Forks Last release: Not found MIT License 122 Commits 3 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

CSShake npm version

Some CSS classes to move your DOM!

Live Demo

Download Center

You could download the complete

file or separated files for each shake animation (i.e
). Each one expanded or minified.


I had to do a 'shake-animation' for a big project. First, I did it in vanilla CSS. After finish it I discover this cool jQuery plugin by @jackrugile. Then I started to think in made this little CSS project


Fork this repo

  $ git clone https://github.com/elrumordelaluz/csshake.git

or via Bower

  $ bower install csshake

or via npm

  $ npm i csshake


  $ npm run watch
  $ npm run build:raw
  $ npm run build:min


Now is also available in

for each shake animation: https://cdnjs.com/libraries/csshake

How to use

First include the CSS file


Then call the diffetent classes on the element you want to shake!

Add also classes to control the



You could customize the Sass @mixins to create new shaking animations, yeah! Editing the

mixin in
.my-custom-shake {
  @include do-shake(
    $name: 'my-custom-shake',
    $h: 5px,
    $v: 5px,
    $r: 3deg,
    $dur: 100ms,
    $precision: 0.02,
    $opacity: false,
    $q: infinite,
    $t: ease-in-out,
    $delay: null,
    $chunk: 100%

{String} is the name for the keyframes animation

{Number} is the max number for random to assign in x axis

{Number} is the max number for random to assign in y axis

{Number} is the max number for random rotation

{Number} is the
time value

{Number} is the precision of the keyframes animation. For example
generates keyframes each 2% and
each 10%. The calculation is
$step: 100 * $precision;

{Boolean} to apply random animation also in the opacity property

{String} is the


time value

{Number} is the part of the keyframes where apply the animation

Use with Webpack 2.x

When installed with

, import
inside your css|stylus|sass files with
prefix to trigger webpack's module resolving:
@import '~csshake';

This will get you non-minified plain css.

Import source sass files

Include full path relative to your

folder with csshake installation
@import '~csshake/scss/csshake-hard.scss';



v1.5.0 (October 5, 2015)

  • Improve the core mixin for a better output code
  • Generate the entire 'shake' animation from only one @mixin. Easier to cerate custom shakes animations classes.
  • Add a new argument to allow animate only part of the 100% of keyframes. Solves issue #25
  • Add a class to allow fire animation from a parent element. Solves issue #16
  • Update semanthics on modifiers classes
  • Export separated stylesheets for each animation. Solves issue #20


Made with ♥ by @elrumordelaluz using Sass.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.