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">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
.freez, .shake-constant & .hover-stop
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.
~~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