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 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 mucho more information.

And remember that there isn't -prefixes on the main code. Hoping that one day we won't need it.
In the demo page I use the magic prefixfree

=======