CSS Shake

Some CSS classes to move your DOM!

The basic collection

• Bs

  Basic Shake

• Ss

  Slow Shake

• Ls

  Little Shake

• Hs

  Hard Shake

• ⇄

  Fixed Horizontal

• ⇵

  Fixed Vertical

• ↻

  Fixed Rotation

• Os

  Opacity Shake

• ✌

  Crazy Shake

• ℇ

  Constant Shake

Some things you could add...

• ❄

  Freezed after Shake

• ⾉

  Constant :hover stops

Select a shake Hard Shake Slow Shake Little Shake Horizopntal Shake Vertical Shake Rotate Shake Opacity Shake Crazy Shake

Realleasy, hover to test...

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

The Sass @mixins, and so on...

	@include shake($x, $y, $rot, $name, $steps, $opacity); /* _mixins.scss */ 
	/* 	$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 */
	@include shake(40px, 40px, 20deg, 'shake-crazy', 10, true); /* an example */

	@include animation($name, $dur, $iter, $tim, $del); /* _shake.scss */
	/*  $name: animation-name,
		$dur: animation-duration,
		$iter: animation-iteration-count,
		$tim: animation-timing-function,
		$del: animation-delay */
	@include animation(shake-slow, 5s); /* an example */

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.
Remember that there isn't prefixes on the main code. Hoping that one day we won't need it.

The about, the idea, and the desire to hear you to improve the whole code...

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.