CSShake
Star 4.6k Watch 120 Fork 630
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';
Made with ♥ by @elrumordelaluz using Sass.
Top comments (0)