Some CSS classes to move your DOM!
The basic collection
Some things you could add...
Freezed after Shake
Constant, :hover stops
How to use
Really easy, hover to test...
<link type="text/css" href="csshake.css">
<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>
The Sass @mixins, and so on...
@include shake($x, $y, $rot, $name, $steps, $opacity); /* _mixins.scss */ /* $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 */ @include shake(40px, 40px, 20deg, 'shake-crazy', 10, true); /* an example */ @include animation($name, $dur, $iter, $tim, $del); /* _shake.scss */ /* $name: animation-name, $dur: animation-duration, $iter: animation-iteration-count, $tim: animation-timing-function, $del: animation-delay */ @include animation(shake-slow, 5s); /* an example */
Attention: you have to use the
random() function to compile Sass files.
You could read how to implement it here or here or here.
Remember that there are prefixes on the main code. Hoping that one day we won't need it.
Anyway here is an unprefixed version.
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.