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
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 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
You could customize the SASS @mixins to create new shaking animations, yeah!
@include shake($x, $y, $rot, $name, $steps, $opacity);
$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);
@include animation($name, $dur, $iter, $tim, $del);
@include animation(shake-slow, 5s);
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