elrumordelaluz / csshake

CSShake > Some CSS classes to move your DOM! Live Demo Download Center You could download the complete file or separated files for each shake animation (i.e ). 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 or via Bower or via npm scripts CDN Now is also available in for each shake animation: https://cdnjs.com/libraries/csshake How to use First include the CSS file Then call the different classes on the element you want to shake! Add also classes to control the . Customize You could customize the Sass @mixins to create new shaking animations, yeah! Editing the mixin in file {String} is the name for the keyframes animation {Number} is the max number for random to assign in x axis {Number} is the max number for random to assign in y axis {Number} is the max number for random rotation {Number} is the time value {Number} is the precision of the keyframes animation. For example generates keyframes each 2% and each 10%. The calculation is {Boolean} to apply random animation also in the opacity property {String} is the value {String} value {Number} time value {Number} is the part of the keyframes where apply the animation Use with Webpack 2.x When installed with , import inside your css|stylus|sass files with prefix to trigger webpack's module resolving: This will get you non-minified plain css. Import source sass files Include full path relative to your folder with csshake installation ======= 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.