CSShake
Some CSS classes to move your DOM!
Classes
The basic collection
-
Bs
Basic Shake
-
Ss
Slow Shake
-
Ls
Little Shake
-
Hs
Hard Shake
-
⇄
Fixed Horizontal
-
⇵
Fixed Vertical
-
↻
Fixed Rotation
-
Os
Opacity Shake
-
✌
Crazy Shake
-
ℇ
Constant Shake
-
%
Chunk Shake
Launch the animations from the parent with class 'shake-trigger' (customizable)
Install
Get started...
$ git clone https://github.com/elrumordelaluz/csshake.git
or
$ bower install csshake
or
$ npm i csshake
or
Download Center
Download separated files for each shake animation, expanded or minified.
How to use
Include the css file then apply classes to elements
<link rel="stylesheet" type="text/css" href="csshake.min.css">
<!-- or from surge.sh -->
<link rel="stylesheet" type="text/css" href="http://csshake.surge.sh/csshake.min.css">
<div class="shake"></div>
<div class="shake-hard"></div>
<div class="shake-slow"></div>
<div class="shake-little"></div>
<div class="shake-horizontal"></div>
<div class="shake-vertical"></div>
<div class="shake-rotate"></div>
<div class="shake-opacity"></div>
<div class="shake-crazy"></div>
<div class="shake-chunk"></div>
<ul class="shake-trigger">
<li class="shake-slow"></li>
<li></li>
<li></li>
<li class="shake-hard"></li>
<li></li>
<li class="shake"></li>
</ul>
<!-- To include only some csshake animations use this syntax -->
<link rel="stylesheet" type="text/css" href="csshake-slow.min.css">
<!-- or from surge.sh -->
<link rel="stylesheet" type="text/css" href="http://csshake.surge.sh/csshake-slow.min.css">
Variations
Some things you could add...
-
Freezed after Shake
-
Constant and stops on :hover
<!-- To shake constant -->
<div class="shake-slow shake-constant"></div>
<!-- and stops on :hover -->
<div class="shake-slow shake-constant shake-constant--hover"></div>
<!-- Freeze animation at that point when :hover -->
<div class="shake-crazy shake-freeze"></div>
More flexibility
The do-shake @mixin, and so on...
.my-custom-shake {
@include do-shake(
$name: 'my-custom-shake', /* {String} is the name for the keyframes animation */
$h: 5px, /* {Number} is the max number for random to assign in x axis */
$v: 5px, /* {Number} is the max number for random to assign in y axis */
$r: 3deg, /* {Number} is the max number for random rotation */
$dur: 100ms, /* {Number} is the animation-duration time value */
$precision: .02, /* {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: false,
$q: infinite, /* {String} is the animation-iteration-count value */
$t: ease-in-out, /* {String} animation-timing-function value */
$delay: null, /* {Number} animation-delay time value */
$chunk: 100%); /* {Number} is the part of the keyframes where apply the animation */
}
/* Example shake-crazy */
.shake-crazy {
@include do-shake('shake-crazy', 40, 40, 20, 100ms, .1, $opacity: true);
}
Last words
The about, the idea, and the desire to hear from you to improve the code...
I had to make a shake animation for a big project. I did it in vanilla CSS at the begining.
After I finished it I discovered this cool jQuery plugin by @jackrugile.
Then I started to think I should make this little CSS project.