csshake

Some CSS classes to move your DOM! Live Demo

Origins

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

How to use

Just include the CSS file

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

and call the diffetent classes on the DOM element you want to shake...

<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 also add these classes to control the animation-play-state .freeze, .shake-constant & .hover-stop

Customize

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

Editing _mixins.scss

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

where $x & $y: pixels to move on the X and Y axis, $rot: deg to rotate, $name: the name assigned to those parameters, $steps: adjust the animation loop (i.e 10 makes an animation in steps of 10%), $opacity: true/false to add opacity animation

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.

~~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~~

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

=======

Made with ♥ by @elrumordelaluz, using Sass.
In the Demo page I used prefixfree and Prism.js both by Lea Verou and One page scroll plugin by @peachananr