Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
CSS classes to move your DOM!
CSS
Branch: master

Merge pull request #24 from kkirsche/patch-1

Remove moot `version` property from bower.json

README.md

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 .freez, .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

Something went wrong with that request. Please try again.