Some CSS classes to move your DOM! Live Demo

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

Just include the CSS file

<link rel="stylesheet" type="text/css" href="csshake.css">

<div class="shake"></div>

<div class="shake shake-hard"></div>

<div class="shake shake-slow"></div>

<div class="shake shake-little"></div>

<div class="shake shake-horizontal"></div>

<div class="shake shake.vertical"></div>

<div class="shake shake-rotate"></div>

<div class="shake shake-opacity"></div>

<div class="shake shake-crazy"></div>

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

 @include shake($x, $y, $rot, $name, $steps, $opacity);

for example:

@include shake(40px, 40px, 20deg, 'shake-crazy', 10, true);

=======

Editing _shake.scss

@include animation($name, $dur, $iter, $tim, $del);

where $name: animation-name, $dur: animation-duration, $iter: animation-iteration-count, $tim: animation-timing-function, $del: animation-delay

for example:

@include animation(shake-slow, 5s);

=======

Attention: you have to use the random() function to compile Sass files.
You could read how to implement it here or here or here much more information.

UPDATE: Just added -webkit & -ms prefixes to the main @mixins. The most important thing is that renders the @keyframes without redundancy.

=======