CSShake
Some CSS classes to move your DOM!
Live Demo
Download Center
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
CDN
Now is also available in cdnjs
for each shake animation: https://cdnjs.com/libraries/csshake
How to use
First include the CSS file
<link rel="stylesheet" type="text/css" href="csshake.css" />`
Then call the diffetent classes on the 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>
Add also classes to control the animation-play-state
.
<!-- Freeze the animation at that point when :hover --> <div class="shake shake-freeze"></div> <!-- Continuous animation instead on :hover --> <div class="shake shake-constant"></div> <!-- and stop when :hover --> <div class="shake shake-constant shake-constant--hover"></div>
Customize
You could customize the Sass @mixins to create new shaking animations, yeah! Editing the do-shake
mixin in scss/_tools.scss
file
.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
Use with Webpack 2.x
When installed with npm
, import csshake
inside your css|stylus|sass files with ~
prefix to trigger webpack's module resolving:
@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
@import '~csshake/scss/csshake-hard.scss';
=======
Changelog
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.