CSShake – Some CSS classes to move or shake DOM elements
http://platform.twitter.com/widgets.js//www.google-analytics.com/analytics.js// https://platform.twitter.com/js/button.9594287b32ac4ed2228acac1d8fcd7c2.js
Include the css file then apply classes to elements
<link type="text/css" href="csshake.min.css">
<!-- or from surge.sh -->
<link 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>CSS Shake :: Some CSS classes to move your DOM! Customization
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);
}
Thanks for reading,
Web Editor