CSShake 

> Some CSS classes to move your DOM!

$3

$3

You could download the complete csshake.css file or separated files for each shake animation (i.e csshake-little.css).
Each one expanded or minified.

Why

I had to do a 'shake-animation' for a big project. First, I did it in vanilla CSS.
After finish it I discover this cool jQuery plugin by @jackrugile.
Then I started to think in made _this little CSS project_

Install

Fork this repo

``
$ git clone https://github.com/elrumordelaluz/csshake.git
`

or via Bower

`
$ bower install csshake
`

or via npm

`
$ npm i csshake
`

#### scripts

`
$ npm run watch
$ npm run build:raw
$ npm run build:min
`

$3

Now is also available in cdnjs for each shake animation: https://cdnjs.com/libraries/csshake

How to use

First include the CSS file

`html

``

Then call the different classes on the element you want to shake!

`html


`

Add also classes to control the animation-play-state.

`html



`

Customize

You could customize the Sass @mixins to create new shaking animations, yeah!
Editing the do-shake mixin in scss/_tools.scss file

`scss
.my-custom-shake {
@include do-shake(
$name: 'my-custom-shake',
$h: 5px,
$v: 5px,
$r: 3deg,
$dur: 100ms,
$precision: 0.02,
$opacity: false,
$q: infinite,
$t: ease-in-out,
$delay: null,
$chunk: 100%
);
}
`

$name {String} is the name for the keyframes animation

$h {Number} is the max number for random to assign in x axis

$v {Number} is the max number for random to assign in y axis

$r {Number} is the max number for random rotation

$dur {Number} is the animation-duration time value

$precision {Number} is the precision of the keyframes animation. For example .02 generates keyframes each 2% and .1 each 10%. The calculation is $step: 100 * $precision;

$opacity {Boolean} to apply random animation also in the opacity property

$q {String} is the animation-iteration-count value

$t {String} animation-timing-function value

$delay {Number} animation-delay time value

$chunk {Number} is the part of the keyframes where apply the animation

$3

When installed with npm, import csshake inside your css|stylus|sass files with ~ prefix to trigger webpack's module resolving:

`scss
@import '~csshake';
`

This will get you non-minified plain css.

##### Import source sass files

Include full path relative to your node_modules folder with csshake installation

`scss
@import '~csshake/scss/csshake-hard.scss';
``

=======

$3

#### v1.5.0 (October 5, 2015)

- Improve the core mixin for a better output code
- Generate the entire 'shake' animation from only one @mixin. Easier to cerate custom shakes animations classes.
- Add a new argument to allow animate only part of the 100% of keyframes. Solves issue #25
- Add a class to allow fire animation from a parent element. Solves issue #16
- Update semanthics on modifiers classes
- Export separated stylesheets for each animation. Solves issue #20

======

Made with ♥ by @elrumordelaluz using Sass.