├── .gitignore ├── FUNDING.yml ├── LICENSE ├── README.md ├── bower.json ├── dist ├── csshake-crazy.css ├── csshake-crazy.css.map ├── csshake-crazy.min.css ├── csshake-default.css ├── csshake-default.css.map ├── csshake-default.min.css ├── csshake-hard.css ├── csshake-hard.css.map ├── csshake-hard.min.css ├── csshake-horizontal.css ├── csshake-horizontal.css.map ├── csshake-horizontal.min.css ├── csshake-little.css ├── csshake-little.css.map ├── csshake-little.min.css ├── csshake-rotate.css ├── csshake-rotate.css.map ├── csshake-rotate.min.css ├── csshake-slow.css ├── csshake-slow.css.map ├── csshake-slow.min.css ├── csshake-vertical.css ├── csshake-vertical.css.map ├── csshake-vertical.min.css ├── csshake.css ├── csshake.css.map ├── csshake.min.css └── index.html ├── docs ├── csshake.css ├── csshake.css.map ├── demo.css └── index.html ├── downloadIndex.js ├── package-lock.json ├── package.json ├── params.json ├── sache.json ├── scss ├── _tools.scss ├── csshake-crazy.scss ├── csshake-default.scss ├── csshake-hard.scss ├── csshake-horizontal.scss ├── csshake-little.scss ├── csshake-rotate.scss ├── csshake-slow.scss ├── csshake-vertical.scss └── csshake.scss └── template-downloads.pug /.gitignore: -------------------------------------------------------------------------------- 1 | # General stuff 2 | *.patch 3 | *.err 4 | *.log 5 | *.orig 6 | *.vi 7 | *.zip 8 | .DS_Store 9 | *~ 10 | ._* 11 | CNAME 12 | 13 | # sass stuff 14 | scss-lint-report.xml 15 | .sass-cache 16 | 17 | # folders 18 | node_modules 19 | -------------------------------------------------------------------------------- /FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: elrumordelaluz 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Lionel T 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSShake [![npm version](https://badge.fury.io/js/csshake.svg)](http://badge.fury.io/js/csshake) 2 | 3 | > Some CSS classes to move your DOM! 4 | 5 | ### [Live Demo](http://elrumordelaluz.github.io/csshake/) 6 | 7 | ### [Download Center](https://csshake.surge.sh/) 8 | 9 | You could download the complete `csshake.css` file or separated files for each shake animation (i.e `csshake-little.css`). 10 | Each one expanded or minified. 11 | 12 | ## Why 13 | 14 | I had to do a 'shake-animation' for a big project. First, I did it in vanilla CSS. 15 | After finish it I discover [this](http://jackrugile.com/jrumble/) cool jQuery plugin by [@jackrugile](https://twitter.com/jackrugile). 16 | Then I started to think in made _[this little CSS project](http://elrumordelaluz.github.io/csshake/)_ 17 | 18 | ## Install 19 | 20 | Fork this repo 21 | 22 | ``` 23 | $ git clone https://github.com/elrumordelaluz/csshake.git 24 | ``` 25 | 26 | or via Bower 27 | 28 | ``` 29 | $ bower install csshake 30 | ``` 31 | 32 | or via npm 33 | 34 | ``` 35 | $ npm i csshake 36 | ``` 37 | 38 | #### scripts 39 | 40 | ``` 41 | $ npm run watch 42 | $ npm run build:raw 43 | $ npm run build:min 44 | ``` 45 | 46 | ### CDN 47 | 48 | Now is also available in `cdnjs` for each shake animation: https://cdnjs.com/libraries/csshake 49 | 50 | ## How to use 51 | 52 | First include the CSS file 53 | 54 | ```html 55 | ` 56 | ``` 57 | 58 | Then call the different classes on the element you want to shake! 59 | 60 | ```html 61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 | ``` 71 | 72 | Add also classes to control the `animation-play-state`. 73 | 74 | ```html 75 | 76 |
77 | 78 |
79 | 80 |
81 | ``` 82 | 83 | ## Customize 84 | 85 | You could customize the Sass @mixins to create new shaking animations, yeah! 86 | Editing the `do-shake` mixin in `scss/_tools.scss` file 87 | 88 | ```scss 89 | .my-custom-shake { 90 | @include do-shake( 91 | $name: 'my-custom-shake', 92 | $h: 5px, 93 | $v: 5px, 94 | $r: 3deg, 95 | $dur: 100ms, 96 | $precision: 0.02, 97 | $opacity: false, 98 | $q: infinite, 99 | $t: ease-in-out, 100 | $delay: null, 101 | $chunk: 100% 102 | ); 103 | } 104 | ``` 105 | 106 | `$name` {String} is the name for the keyframes animation 107 | 108 | `$h` {Number} is the max number for random to assign in x axis 109 | 110 | `$v` {Number} is the max number for random to assign in y axis 111 | 112 | `$r` {Number} is the max number for random rotation 113 | 114 | `$dur` {Number} is the `animation-duration` time value 115 | 116 | `$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;` 117 | 118 | `$opacity` {Boolean} to apply random animation also in the opacity property 119 | 120 | `$q` {String} is the `animation-iteration-count` value 121 | 122 | `$t` {String} `animation-timing-function` value 123 | 124 | `$delay` {Number} `animation-delay` time value 125 | 126 | `$chunk` {Number} is the part of the keyframes where apply the animation 127 | 128 | ### Use with Webpack 2.x 129 | 130 | When installed with `npm`, import `csshake` inside your css|stylus|sass files with `~` prefix to trigger webpack's module resolving: 131 | 132 | ```scss 133 | @import '~csshake'; 134 | ``` 135 | 136 | This will get you non-minified plain css. 137 | 138 | ##### Import source sass files 139 | 140 | Include full path relative to your `node_modules` folder with csshake installation 141 | 142 | ```scss 143 | @import '~csshake/scss/csshake-hard.scss'; 144 | ``` 145 | 146 | ======= 147 | 148 | ### Changelog 149 | 150 | #### [v1.5.0](https://github.com/elrumordelaluz/csshake/releases/tag/v1.5) (October 5, 2015) 151 | 152 | - Improve the core mixin for a better output code 153 | - Generate the entire 'shake' animation from only one [@mixin](https://github.com/elrumordelaluz/csshake/blob/master/scss/_tools.scss#L30). Easier to cerate custom shakes animations classes. 154 | - Add a [new argument](https://github.com/elrumordelaluz/csshake/blob/master/scss/_tools.scss#L41) to allow animate only part of the 100% of keyframes. Solves [issue #25](https://github.com/elrumordelaluz/csshake/issues/25) 155 | - Add a [class](https://github.com/elrumordelaluz/csshake/blob/master/scss/_tools.scss#L3) to allow fire animation from a parent element. Solves [issue #16](https://github.com/elrumordelaluz/csshake/issues/16) 156 | - Update semanthics on modifiers classes 157 | - Export separated stylesheets for each animation. Solves [issue #20](https://github.com/elrumordelaluz/csshake/issues/20) 158 | 159 | ====== 160 | 161 | Made with ♥ by [@elrumordelaluz](http://twitter.com/elrumordelaluz) using [Sass](http://sass-lang.com/). 162 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "csshake", 3 | "homepage": "http://elrumordelaluz.github.io/csshake/", 4 | "authors": [ 5 | "Lionel " 6 | ], 7 | "description": "Some CSS classes to move your DOM!", 8 | "main": [ 9 | "dist/csshake.css", 10 | "scss/csshake.css" 11 | ], 12 | "keywords": [ 13 | "csshake", 14 | "css", 15 | "animations", 16 | "transitions", 17 | "shake" 18 | ], 19 | "license": "MIT", 20 | "ignore": [ 21 | "**/.*", 22 | "node_modules", 23 | "bower_components", 24 | "test", 25 | "tests" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /dist/csshake-crazy.css: -------------------------------------------------------------------------------- 1 | /*! * * * * * * * * * * * * * * * * * * * *\ 2 | CSShake :: shake-crazy 3 | v1.6.0 4 | CSS classes to move your DOM 5 | (c) 2015 @elrumordelaluz 6 | http://elrumordelaluz.github.io/csshake/ 7 | Licensed under MIT 8 | \* * * * * * * * * * * * * * * * * * * * */ 9 | .shake-crazy { 10 | display: inherit; 11 | transform-origin: center center; 12 | } 13 | 14 | .shake-freeze, 15 | .shake-constant.shake-constant--hover:hover, 16 | .shake-trigger:hover .shake-constant.shake-constant--hover { 17 | animation-play-state: paused; 18 | } 19 | 20 | .shake-crazy:hover, .shake-trigger:hover .shake-crazy, .shake-freeze:hover, 21 | .shake-trigger:hover .shake-freeze { 22 | animation-play-state: running; 23 | } 24 | 25 | @keyframes shake-crazy { 26 | 10% { 27 | transform: translate(-3px, -14px) rotate(0deg); 28 | opacity: 0.61; 29 | } 30 | 20% { 31 | transform: translate(14px, 18px) rotate(-1deg); 32 | opacity: 0.14; 33 | } 34 | 30% { 35 | transform: translate(-9px, 0px) rotate(-7deg); 36 | opacity: 0.91; 37 | } 38 | 40% { 39 | transform: translate(-8px, 5px) rotate(-1deg); 40 | opacity: 0.34; 41 | } 42 | 50% { 43 | transform: translate(-4px, 1px) rotate(9deg); 44 | opacity: 0.52; 45 | } 46 | 60% { 47 | transform: translate(11px, 5px) rotate(-8deg); 48 | opacity: 0.43; 49 | } 50 | 70% { 51 | transform: translate(0px, -11px) rotate(10deg); 52 | opacity: 0.68; 53 | } 54 | 80% { 55 | transform: translate(6px, 5px) rotate(-5deg); 56 | opacity: 0.1; 57 | } 58 | 90% { 59 | transform: translate(-10px, 0px) rotate(9deg); 60 | opacity: 0.34; 61 | } 62 | 0%, 100% { 63 | transform: translate(0, 0) rotate(0); 64 | } 65 | } 66 | .shake-crazy:hover, .shake-trigger:hover .shake-crazy, .shake-crazy.shake-freeze, .shake-crazy.shake-constant { 67 | animation-name: shake-crazy; 68 | animation-duration: 100ms; 69 | animation-timing-function: ease-in-out; 70 | animation-iteration-count: infinite; 71 | } 72 | 73 | /*# sourceMappingURL=csshake-crazy.css.map */ 74 | -------------------------------------------------------------------------------- /dist/csshake-crazy.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../scss/csshake-crazy.scss","../scss/_tools.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACKA;EACE;EACA;;;AAGF;AAAA;AAAA;EAAY;;;AACZ;AAAA;EAAY;;;AA0CR;EASI;IACE;IACe;;EAFjB;IACE;IACe;;EAFjB;IACE;IACe;;EAFjB;IACE;IACe;;EAFjB;IACE;IACe;;EAFjB;IACE;IACe;;EAFjB;IACE;IACe;;EAFjB;IACE;IACe;;EAFjB;IACE;IACe;;EAMnB;IACE;;;AAQN;EAKE;EACA,oBD3EwD;EC4ExD,2BAhDE;EAiDF,2BAlDE","file":"csshake-crazy.css"} -------------------------------------------------------------------------------- /dist/csshake-crazy.min.css: -------------------------------------------------------------------------------- 1 | /*! * * * * * * * * * * * * * * * * * * * *\ 2 | CSShake :: shake-crazy 3 | v1.6.0 4 | CSS classes to move your DOM 5 | (c) 2015 @elrumordelaluz 6 | http://elrumordelaluz.github.io/csshake/ 7 | Licensed under MIT 8 | \* * * * * * * * * * * * * * * * * * * * */.shake-crazy{display:inherit;transform-origin:center center}.shake-freeze,.shake-constant.shake-constant--hover:hover,.shake-trigger:hover .shake-constant.shake-constant--hover{animation-play-state:paused}.shake-crazy:hover,.shake-trigger:hover .shake-crazy,.shake-freeze:hover,.shake-trigger:hover .shake-freeze{animation-play-state:running}@keyframes shake-crazy{10%{transform:translate(-2px, 3px) rotate(0deg);opacity:.48}20%{transform:translate(13px, -3px) rotate(7deg);opacity:.32}30%{transform:translate(9px, 2px) rotate(-1deg);opacity:.98}40%{transform:translate(-12px, 13px) rotate(-2deg);opacity:.86}50%{transform:translate(-10px, -12px) rotate(8deg);opacity:.32}60%{transform:translate(0px, -15px) rotate(-8deg);opacity:.42}70%{transform:translate(17px, 8px) rotate(-6deg);opacity:.62}80%{transform:translate(8px, -1px) rotate(1deg);opacity:.96}90%{transform:translate(4px, 14px) rotate(-4deg);opacity:.73}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-crazy:hover,.shake-trigger:hover .shake-crazy,.shake-crazy.shake-freeze,.shake-crazy.shake-constant{animation-name:shake-crazy;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}/*# sourceMappingURL=csshake-crazy.css.map */ 9 | -------------------------------------------------------------------------------- /dist/csshake-default.css: -------------------------------------------------------------------------------- 1 | /*! * * * * * * * * * * * * * * * * * * * *\ 2 | CSShake :: shake 3 | v1.6.0 4 | CSS classes to move your DOM 5 | (c) 2015 @elrumordelaluz 6 | http://elrumordelaluz.github.io/csshake/ 7 | Licensed under MIT 8 | \* * * * * * * * * * * * * * * * * * * * */ 9 | .shake { 10 | display: inherit; 11 | transform-origin: center center; 12 | } 13 | 14 | .shake-freeze, 15 | .shake-constant.shake-constant--hover:hover, 16 | .shake-trigger:hover .shake-constant.shake-constant--hover { 17 | animation-play-state: paused; 18 | } 19 | 20 | .shake:hover, .shake-trigger:hover .shake, .shake-freeze:hover, 21 | .shake-trigger:hover .shake-freeze { 22 | animation-play-state: running; 23 | } 24 | 25 | @keyframes shake { 26 | 2% { 27 | transform: translate(1.5px, 2.5px) rotate(1.5deg); 28 | } 29 | 4% { 30 | transform: translate(-0.5px, 2.5px) rotate(0.5deg); 31 | } 32 | 6% { 33 | transform: translate(1.5px, 0.5px) rotate(1.5deg); 34 | } 35 | 8% { 36 | transform: translate(1.5px, -0.5px) rotate(1.5deg); 37 | } 38 | 10% { 39 | transform: translate(-0.5px, 1.5px) rotate(1.5deg); 40 | } 41 | 12% { 42 | transform: translate(0.5px, -1.5px) rotate(0.5deg); 43 | } 44 | 14% { 45 | transform: translate(2.5px, -1.5px) rotate(0.5deg); 46 | } 47 | 16% { 48 | transform: translate(-1.5px, 2.5px) rotate(-0.5deg); 49 | } 50 | 18% { 51 | transform: translate(2.5px, 1.5px) rotate(0.5deg); 52 | } 53 | 20% { 54 | transform: translate(1.5px, 0.5px) rotate(-0.5deg); 55 | } 56 | 22% { 57 | transform: translate(-1.5px, 0.5px) rotate(-0.5deg); 58 | } 59 | 24% { 60 | transform: translate(2.5px, 0.5px) rotate(-0.5deg); 61 | } 62 | 26% { 63 | transform: translate(1.5px, -0.5px) rotate(1.5deg); 64 | } 65 | 28% { 66 | transform: translate(2.5px, 1.5px) rotate(0.5deg); 67 | } 68 | 30% { 69 | transform: translate(-1.5px, -0.5px) rotate(1.5deg); 70 | } 71 | 32% { 72 | transform: translate(1.5px, -1.5px) rotate(1.5deg); 73 | } 74 | 34% { 75 | transform: translate(-0.5px, 0.5px) rotate(0.5deg); 76 | } 77 | 36% { 78 | transform: translate(-1.5px, 2.5px) rotate(-0.5deg); 79 | } 80 | 38% { 81 | transform: translate(0.5px, 1.5px) rotate(-0.5deg); 82 | } 83 | 40% { 84 | transform: translate(0.5px, 1.5px) rotate(1.5deg); 85 | } 86 | 42% { 87 | transform: translate(2.5px, 1.5px) rotate(-0.5deg); 88 | } 89 | 44% { 90 | transform: translate(-1.5px, -0.5px) rotate(-0.5deg); 91 | } 92 | 46% { 93 | transform: translate(-1.5px, 0.5px) rotate(0.5deg); 94 | } 95 | 48% { 96 | transform: translate(2.5px, 2.5px) rotate(-0.5deg); 97 | } 98 | 50% { 99 | transform: translate(2.5px, -1.5px) rotate(0.5deg); 100 | } 101 | 52% { 102 | transform: translate(0.5px, 2.5px) rotate(-0.5deg); 103 | } 104 | 54% { 105 | transform: translate(-0.5px, -0.5px) rotate(-0.5deg); 106 | } 107 | 56% { 108 | transform: translate(1.5px, -0.5px) rotate(-0.5deg); 109 | } 110 | 58% { 111 | transform: translate(2.5px, 2.5px) rotate(0.5deg); 112 | } 113 | 60% { 114 | transform: translate(2.5px, 1.5px) rotate(1.5deg); 115 | } 116 | 62% { 117 | transform: translate(1.5px, -1.5px) rotate(-0.5deg); 118 | } 119 | 64% { 120 | transform: translate(0.5px, -1.5px) rotate(1.5deg); 121 | } 122 | 66% { 123 | transform: translate(1.5px, 2.5px) rotate(1.5deg); 124 | } 125 | 68% { 126 | transform: translate(2.5px, -1.5px) rotate(1.5deg); 127 | } 128 | 70% { 129 | transform: translate(2.5px, 1.5px) rotate(1.5deg); 130 | } 131 | 72% { 132 | transform: translate(2.5px, -1.5px) rotate(1.5deg); 133 | } 134 | 74% { 135 | transform: translate(1.5px, 2.5px) rotate(-0.5deg); 136 | } 137 | 76% { 138 | transform: translate(0.5px, -0.5px) rotate(1.5deg); 139 | } 140 | 78% { 141 | transform: translate(-0.5px, 2.5px) rotate(0.5deg); 142 | } 143 | 80% { 144 | transform: translate(2.5px, -1.5px) rotate(-0.5deg); 145 | } 146 | 82% { 147 | transform: translate(-0.5px, -1.5px) rotate(-0.5deg); 148 | } 149 | 84% { 150 | transform: translate(-0.5px, -0.5px) rotate(1.5deg); 151 | } 152 | 86% { 153 | transform: translate(1.5px, -1.5px) rotate(1.5deg); 154 | } 155 | 88% { 156 | transform: translate(0.5px, 1.5px) rotate(1.5deg); 157 | } 158 | 90% { 159 | transform: translate(-0.5px, 1.5px) rotate(-0.5deg); 160 | } 161 | 92% { 162 | transform: translate(2.5px, -1.5px) rotate(-0.5deg); 163 | } 164 | 94% { 165 | transform: translate(-0.5px, -0.5px) rotate(0.5deg); 166 | } 167 | 96% { 168 | transform: translate(2.5px, -0.5px) rotate(1.5deg); 169 | } 170 | 98% { 171 | transform: translate(1.5px, 1.5px) rotate(1.5deg); 172 | } 173 | 0%, 100% { 174 | transform: translate(0, 0) rotate(0); 175 | } 176 | } 177 | .shake:hover, .shake-trigger:hover .shake, .shake.shake-freeze, .shake.shake-constant { 178 | animation-name: shake; 179 | animation-duration: 100ms; 180 | animation-timing-function: ease-in-out; 181 | animation-iteration-count: infinite; 182 | } 183 | 184 | /*# sourceMappingURL=csshake-default.css.map */ 185 | -------------------------------------------------------------------------------- /dist/csshake-default.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../scss/csshake-default.scss","../scss/_tools.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACKA;EACE;EACA;;;AAGF;AAAA;AAAA;EAAY;;;AACZ;AAAA;EAAY;;;AA0CR;EASI;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EAOJ;IACE;;;AAQN;EAKE;EACA,oBAnDI;EAoDJ,2BAhDE;EAiDF,2BAlDE","file":"csshake-default.css"} -------------------------------------------------------------------------------- /dist/csshake-default.min.css: -------------------------------------------------------------------------------- 1 | /*! * * * * * * * * * * * * * * * * * * * *\ 2 | CSShake :: shake 3 | v1.6.0 4 | CSS classes to move your DOM 5 | (c) 2015 @elrumordelaluz 6 | http://elrumordelaluz.github.io/csshake/ 7 | Licensed under MIT 8 | \* * * * * * * * * * * * * * * * * * * * */.shake{display:inherit;transform-origin:center center}.shake-freeze,.shake-constant.shake-constant--hover:hover,.shake-trigger:hover .shake-constant.shake-constant--hover{animation-play-state:paused}.shake:hover,.shake-trigger:hover .shake,.shake-freeze:hover,.shake-trigger:hover .shake-freeze{animation-play-state:running}@keyframes shake{2%{transform:translate(-1.5px, 1.5px) rotate(0.5deg)}4%{transform:translate(1.5px, -0.5px) rotate(1.5deg)}6%{transform:translate(0.5px, 2.5px) rotate(1.5deg)}8%{transform:translate(1.5px, -1.5px) rotate(0.5deg)}10%{transform:translate(2.5px, 2.5px) rotate(0.5deg)}12%{transform:translate(2.5px, 0.5px) rotate(1.5deg)}14%{transform:translate(0.5px, 1.5px) rotate(1.5deg)}16%{transform:translate(1.5px, 2.5px) rotate(0.5deg)}18%{transform:translate(-1.5px, -1.5px) rotate(0.5deg)}20%{transform:translate(2.5px, 1.5px) rotate(-0.5deg)}22%{transform:translate(-0.5px, -0.5px) rotate(-0.5deg)}24%{transform:translate(-1.5px, 2.5px) rotate(0.5deg)}26%{transform:translate(2.5px, 1.5px) rotate(-0.5deg)}28%{transform:translate(1.5px, 2.5px) rotate(-0.5deg)}30%{transform:translate(0.5px, -0.5px) rotate(1.5deg)}32%{transform:translate(-0.5px, -1.5px) rotate(0.5deg)}34%{transform:translate(0.5px, 0.5px) rotate(0.5deg)}36%{transform:translate(-0.5px, -1.5px) rotate(1.5deg)}38%{transform:translate(2.5px, 2.5px) rotate(-0.5deg)}40%{transform:translate(1.5px, -1.5px) rotate(-0.5deg)}42%{transform:translate(1.5px, -1.5px) rotate(0.5deg)}44%{transform:translate(-0.5px, 0.5px) rotate(-0.5deg)}46%{transform:translate(-0.5px, 2.5px) rotate(-0.5deg)}48%{transform:translate(2.5px, 1.5px) rotate(1.5deg)}50%{transform:translate(0.5px, 0.5px) rotate(0.5deg)}52%{transform:translate(-0.5px, 2.5px) rotate(-0.5deg)}54%{transform:translate(1.5px, -1.5px) rotate(-0.5deg)}56%{transform:translate(1.5px, 1.5px) rotate(1.5deg)}58%{transform:translate(-1.5px, 2.5px) rotate(1.5deg)}60%{transform:translate(2.5px, 2.5px) rotate(-0.5deg)}62%{transform:translate(0.5px, 1.5px) rotate(0.5deg)}64%{transform:translate(1.5px, -1.5px) rotate(-0.5deg)}66%{transform:translate(0.5px, 0.5px) rotate(0.5deg)}68%{transform:translate(-0.5px, -0.5px) rotate(-0.5deg)}70%{transform:translate(2.5px, 2.5px) rotate(1.5deg)}72%{transform:translate(-1.5px, 0.5px) rotate(1.5deg)}74%{transform:translate(0.5px, 0.5px) rotate(1.5deg)}76%{transform:translate(-0.5px, -0.5px) rotate(0.5deg)}78%{transform:translate(2.5px, -1.5px) rotate(1.5deg)}80%{transform:translate(-0.5px, 1.5px) rotate(-0.5deg)}82%{transform:translate(-0.5px, 2.5px) rotate(0.5deg)}84%{transform:translate(0.5px, 1.5px) rotate(-0.5deg)}86%{transform:translate(1.5px, -0.5px) rotate(1.5deg)}88%{transform:translate(-1.5px, -0.5px) rotate(0.5deg)}90%{transform:translate(-1.5px, -1.5px) rotate(0.5deg)}92%{transform:translate(-0.5px, 0.5px) rotate(-0.5deg)}94%{transform:translate(1.5px, 0.5px) rotate(-0.5deg)}96%{transform:translate(-1.5px, 1.5px) rotate(0.5deg)}98%{transform:translate(2.5px, -0.5px) rotate(-0.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake:hover,.shake-trigger:hover .shake,.shake.shake-freeze,.shake.shake-constant{animation-name:shake;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}/*# sourceMappingURL=csshake-default.css.map */ 9 | -------------------------------------------------------------------------------- /dist/csshake-hard.css: -------------------------------------------------------------------------------- 1 | /*! * * * * * * * * * * * * * * * * * * * *\ 2 | CSShake :: shake-hard 3 | v1.6.0 4 | CSS classes to move your DOM 5 | (c) 2015 @elrumordelaluz 6 | http://elrumordelaluz.github.io/csshake/ 7 | Licensed under MIT 8 | \* * * * * * * * * * * * * * * * * * * * */ 9 | .shake-hard { 10 | display: inherit; 11 | transform-origin: center center; 12 | } 13 | 14 | .shake-freeze, 15 | .shake-constant.shake-constant--hover:hover, 16 | .shake-trigger:hover .shake-constant.shake-constant--hover { 17 | animation-play-state: paused; 18 | } 19 | 20 | .shake-hard:hover, .shake-trigger:hover .shake-hard, .shake-freeze:hover, 21 | .shake-trigger:hover .shake-freeze { 22 | animation-play-state: running; 23 | } 24 | 25 | @keyframes shake-hard { 26 | 2% { 27 | transform: translate(-7px, 10px) rotate(3.5deg); 28 | } 29 | 4% { 30 | transform: translate(-5px, 7px) rotate(-1.5deg); 31 | } 32 | 6% { 33 | transform: translate(0px, 7px) rotate(3.5deg); 34 | } 35 | 8% { 36 | transform: translate(0px, -9px) rotate(-0.5deg); 37 | } 38 | 10% { 39 | transform: translate(-8px, -5px) rotate(2.5deg); 40 | } 41 | 12% { 42 | transform: translate(-1px, 4px) rotate(3.5deg); 43 | } 44 | 14% { 45 | transform: translate(8px, 4px) rotate(0.5deg); 46 | } 47 | 16% { 48 | transform: translate(-3px, 8px) rotate(0.5deg); 49 | } 50 | 18% { 51 | transform: translate(10px, 10px) rotate(-0.5deg); 52 | } 53 | 20% { 54 | transform: translate(-4px, 10px) rotate(0.5deg); 55 | } 56 | 22% { 57 | transform: translate(6px, 4px) rotate(0.5deg); 58 | } 59 | 24% { 60 | transform: translate(-9px, -7px) rotate(-0.5deg); 61 | } 62 | 26% { 63 | transform: translate(8px, 3px) rotate(-1.5deg); 64 | } 65 | 28% { 66 | transform: translate(-8px, -9px) rotate(2.5deg); 67 | } 68 | 30% { 69 | transform: translate(0px, -3px) rotate(-0.5deg); 70 | } 71 | 32% { 72 | transform: translate(-3px, 3px) rotate(1.5deg); 73 | } 74 | 34% { 75 | transform: translate(8px, 0px) rotate(-1.5deg); 76 | } 77 | 36% { 78 | transform: translate(-3px, -5px) rotate(-2.5deg); 79 | } 80 | 38% { 81 | transform: translate(-3px, 6px) rotate(-0.5deg); 82 | } 83 | 40% { 84 | transform: translate(3px, -6px) rotate(1.5deg); 85 | } 86 | 42% { 87 | transform: translate(-6px, -4px) rotate(-1.5deg); 88 | } 89 | 44% { 90 | transform: translate(-2px, -7px) rotate(-0.5deg); 91 | } 92 | 46% { 93 | transform: translate(9px, 2px) rotate(-0.5deg); 94 | } 95 | 48% { 96 | transform: translate(6px, 4px) rotate(3.5deg); 97 | } 98 | 50% { 99 | transform: translate(7px, 3px) rotate(0.5deg); 100 | } 101 | 52% { 102 | transform: translate(6px, 6px) rotate(0.5deg); 103 | } 104 | 54% { 105 | transform: translate(-4px, -5px) rotate(2.5deg); 106 | } 107 | 56% { 108 | transform: translate(-8px, 0px) rotate(2.5deg); 109 | } 110 | 58% { 111 | transform: translate(-4px, 2px) rotate(-1.5deg); 112 | } 113 | 60% { 114 | transform: translate(-6px, 4px) rotate(-0.5deg); 115 | } 116 | 62% { 117 | transform: translate(6px, 8px) rotate(0.5deg); 118 | } 119 | 64% { 120 | transform: translate(0px, 8px) rotate(-2.5deg); 121 | } 122 | 66% { 123 | transform: translate(6px, 8px) rotate(0.5deg); 124 | } 125 | 68% { 126 | transform: translate(-6px, 0px) rotate(1.5deg); 127 | } 128 | 70% { 129 | transform: translate(1px, -5px) rotate(-0.5deg); 130 | } 131 | 72% { 132 | transform: translate(7px, -5px) rotate(1.5deg); 133 | } 134 | 74% { 135 | transform: translate(-3px, -7px) rotate(1.5deg); 136 | } 137 | 76% { 138 | transform: translate(-4px, -7px) rotate(2.5deg); 139 | } 140 | 78% { 141 | transform: translate(-5px, 4px) rotate(3.5deg); 142 | } 143 | 80% { 144 | transform: translate(2px, 7px) rotate(-0.5deg); 145 | } 146 | 82% { 147 | transform: translate(-6px, 10px) rotate(1.5deg); 148 | } 149 | 84% { 150 | transform: translate(-8px, -8px) rotate(1.5deg); 151 | } 152 | 86% { 153 | transform: translate(-6px, 4px) rotate(-0.5deg); 154 | } 155 | 88% { 156 | transform: translate(-9px, -7px) rotate(3.5deg); 157 | } 158 | 90% { 159 | transform: translate(7px, 8px) rotate(-0.5deg); 160 | } 161 | 92% { 162 | transform: translate(-2px, -6px) rotate(-0.5deg); 163 | } 164 | 94% { 165 | transform: translate(-2px, 8px) rotate(2.5deg); 166 | } 167 | 96% { 168 | transform: translate(-5px, 6px) rotate(-1.5deg); 169 | } 170 | 98% { 171 | transform: translate(6px, -5px) rotate(2.5deg); 172 | } 173 | 0%, 100% { 174 | transform: translate(0, 0) rotate(0); 175 | } 176 | } 177 | .shake-hard:hover, .shake-trigger:hover .shake-hard, .shake-hard.shake-freeze, .shake-hard.shake-constant { 178 | animation-name: shake-hard; 179 | animation-duration: 100ms; 180 | animation-timing-function: ease-in-out; 181 | animation-iteration-count: infinite; 182 | } 183 | 184 | /*# sourceMappingURL=csshake-hard.css.map */ 185 | -------------------------------------------------------------------------------- /dist/csshake-hard.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../scss/csshake-hard.scss","../scss/_tools.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACKA;EACE;EACA;;;AAGF;AAAA;AAAA;EAAY;;;AACZ;AAAA;EAAY;;;AA0CR;EASI;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EAOJ;IACE;;;AAQN;EAKE;EACA,oBAnDI;EAoDJ,2BAhDE;EAiDF,2BAlDE","file":"csshake-hard.css"} -------------------------------------------------------------------------------- /dist/csshake-hard.min.css: -------------------------------------------------------------------------------- 1 | /*! * * * * * * * * * * * * * * * * * * * *\ 2 | CSShake :: shake-hard 3 | v1.6.0 4 | CSS classes to move your DOM 5 | (c) 2015 @elrumordelaluz 6 | http://elrumordelaluz.github.io/csshake/ 7 | Licensed under MIT 8 | \* * * * * * * * * * * * * * * * * * * * */.shake-hard{display:inherit;transform-origin:center center}.shake-freeze,.shake-constant.shake-constant--hover:hover,.shake-trigger:hover .shake-constant.shake-constant--hover{animation-play-state:paused}.shake-hard:hover,.shake-trigger:hover .shake-hard,.shake-freeze:hover,.shake-trigger:hover .shake-freeze{animation-play-state:running}@keyframes shake-hard{2%{transform:translate(6px, -5px) rotate(-0.5deg)}4%{transform:translate(-4px, -4px) rotate(0.5deg)}6%{transform:translate(-7px, -8px) rotate(0.5deg)}8%{transform:translate(9px, -3px) rotate(-2.5deg)}10%{transform:translate(5px, -5px) rotate(0.5deg)}12%{transform:translate(6px, 9px) rotate(0.5deg)}14%{transform:translate(6px, -2px) rotate(1.5deg)}16%{transform:translate(5px, -4px) rotate(1.5deg)}18%{transform:translate(-6px, -4px) rotate(-0.5deg)}20%{transform:translate(-8px, -9px) rotate(1.5deg)}22%{transform:translate(-8px, 6px) rotate(2.5deg)}24%{transform:translate(-7px, 0px) rotate(-2.5deg)}26%{transform:translate(7px, 7px) rotate(1.5deg)}28%{transform:translate(7px, -8px) rotate(0.5deg)}30%{transform:translate(-2px, -8px) rotate(-1.5deg)}32%{transform:translate(-7px, -2px) rotate(-0.5deg)}34%{transform:translate(1px, -8px) rotate(0.5deg)}36%{transform:translate(4px, -4px) rotate(1.5deg)}38%{transform:translate(4px, -4px) rotate(0.5deg)}40%{transform:translate(-6px, 3px) rotate(2.5deg)}42%{transform:translate(2px, 5px) rotate(-0.5deg)}44%{transform:translate(0px, -8px) rotate(2.5deg)}46%{transform:translate(3px, 1px) rotate(-0.5deg)}48%{transform:translate(1px, 2px) rotate(-1.5deg)}50%{transform:translate(10px, 10px) rotate(1.5deg)}52%{transform:translate(-2px, -8px) rotate(2.5deg)}54%{transform:translate(0px, 10px) rotate(1.5deg)}56%{transform:translate(-9px, -5px) rotate(-0.5deg)}58%{transform:translate(2px, 3px) rotate(1.5deg)}60%{transform:translate(-4px, 10px) rotate(2.5deg)}62%{transform:translate(4px, 0px) rotate(2.5deg)}64%{transform:translate(-2px, -2px) rotate(-2.5deg)}66%{transform:translate(6px, 9px) rotate(2.5deg)}68%{transform:translate(3px, 7px) rotate(2.5deg)}70%{transform:translate(-1px, -7px) rotate(-0.5deg)}72%{transform:translate(10px, 10px) rotate(-0.5deg)}74%{transform:translate(10px, 8px) rotate(1.5deg)}76%{transform:translate(3px, 0px) rotate(-0.5deg)}78%{transform:translate(4px, 3px) rotate(-1.5deg)}80%{transform:translate(2px, -1px) rotate(3.5deg)}82%{transform:translate(5px, 8px) rotate(3.5deg)}84%{transform:translate(3px, 3px) rotate(0.5deg)}86%{transform:translate(2px, -4px) rotate(2.5deg)}88%{transform:translate(-6px, -4px) rotate(1.5deg)}90%{transform:translate(-2px, 2px) rotate(-0.5deg)}92%{transform:translate(-8px, -2px) rotate(1.5deg)}94%{transform:translate(-3px, -7px) rotate(-1.5deg)}96%{transform:translate(9px, 2px) rotate(0.5deg)}98%{transform:translate(5px, -3px) rotate(1.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-hard:hover,.shake-trigger:hover .shake-hard,.shake-hard.shake-freeze,.shake-hard.shake-constant{animation-name:shake-hard;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}/*# sourceMappingURL=csshake-hard.css.map */ 9 | -------------------------------------------------------------------------------- /dist/csshake-horizontal.css: -------------------------------------------------------------------------------- 1 | /*! * * * * * * * * * * * * * * * * * * * *\ 2 | CSShake :: shake-horizontal 3 | v1.6.0 4 | CSS classes to move your DOM 5 | (c) 2015 @elrumordelaluz 6 | http://elrumordelaluz.github.io/csshake/ 7 | Licensed under MIT 8 | \* * * * * * * * * * * * * * * * * * * * */ 9 | .shake-horizontal { 10 | display: inherit; 11 | transform-origin: center center; 12 | } 13 | 14 | .shake-freeze, 15 | .shake-constant.shake-constant--hover:hover, 16 | .shake-trigger:hover .shake-constant.shake-constant--hover { 17 | animation-play-state: paused; 18 | } 19 | 20 | .shake-horizontal:hover, .shake-trigger:hover .shake-horizontal, .shake-freeze:hover, 21 | .shake-trigger:hover .shake-freeze { 22 | animation-play-state: running; 23 | } 24 | 25 | @keyframes shake-horizontal { 26 | 2% { 27 | transform: translate(3px, 0) rotate(0); 28 | } 29 | 4% { 30 | transform: translate(1px, 0) rotate(0); 31 | } 32 | 6% { 33 | transform: translate(-6px, 0) rotate(0); 34 | } 35 | 8% { 36 | transform: translate(0px, 0) rotate(0); 37 | } 38 | 10% { 39 | transform: translate(-8px, 0) rotate(0); 40 | } 41 | 12% { 42 | transform: translate(6px, 0) rotate(0); 43 | } 44 | 14% { 45 | transform: translate(5px, 0) rotate(0); 46 | } 47 | 16% { 48 | transform: translate(-8px, 0) rotate(0); 49 | } 50 | 18% { 51 | transform: translate(-6px, 0) rotate(0); 52 | } 53 | 20% { 54 | transform: translate(-7px, 0) rotate(0); 55 | } 56 | 22% { 57 | transform: translate(4px, 0) rotate(0); 58 | } 59 | 24% { 60 | transform: translate(-8px, 0) rotate(0); 61 | } 62 | 26% { 63 | transform: translate(-3px, 0) rotate(0); 64 | } 65 | 28% { 66 | transform: translate(-7px, 0) rotate(0); 67 | } 68 | 30% { 69 | transform: translate(-6px, 0) rotate(0); 70 | } 71 | 32% { 72 | transform: translate(8px, 0) rotate(0); 73 | } 74 | 34% { 75 | transform: translate(-4px, 0) rotate(0); 76 | } 77 | 36% { 78 | transform: translate(-2px, 0) rotate(0); 79 | } 80 | 38% { 81 | transform: translate(-4px, 0) rotate(0); 82 | } 83 | 40% { 84 | transform: translate(-9px, 0) rotate(0); 85 | } 86 | 42% { 87 | transform: translate(1px, 0) rotate(0); 88 | } 89 | 44% { 90 | transform: translate(-9px, 0) rotate(0); 91 | } 92 | 46% { 93 | transform: translate(10px, 0) rotate(0); 94 | } 95 | 48% { 96 | transform: translate(-7px, 0) rotate(0); 97 | } 98 | 50% { 99 | transform: translate(-7px, 0) rotate(0); 100 | } 101 | 52% { 102 | transform: translate(1px, 0) rotate(0); 103 | } 104 | 54% { 105 | transform: translate(9px, 0) rotate(0); 106 | } 107 | 56% { 108 | transform: translate(-1px, 0) rotate(0); 109 | } 110 | 58% { 111 | transform: translate(-9px, 0) rotate(0); 112 | } 113 | 60% { 114 | transform: translate(-9px, 0) rotate(0); 115 | } 116 | 62% { 117 | transform: translate(7px, 0) rotate(0); 118 | } 119 | 64% { 120 | transform: translate(0px, 0) rotate(0); 121 | } 122 | 66% { 123 | transform: translate(-3px, 0) rotate(0); 124 | } 125 | 68% { 126 | transform: translate(-4px, 0) rotate(0); 127 | } 128 | 70% { 129 | transform: translate(7px, 0) rotate(0); 130 | } 131 | 72% { 132 | transform: translate(-9px, 0) rotate(0); 133 | } 134 | 74% { 135 | transform: translate(-1px, 0) rotate(0); 136 | } 137 | 76% { 138 | transform: translate(1px, 0) rotate(0); 139 | } 140 | 78% { 141 | transform: translate(4px, 0) rotate(0); 142 | } 143 | 80% { 144 | transform: translate(3px, 0) rotate(0); 145 | } 146 | 82% { 147 | transform: translate(-4px, 0) rotate(0); 148 | } 149 | 84% { 150 | transform: translate(2px, 0) rotate(0); 151 | } 152 | 86% { 153 | transform: translate(-5px, 0) rotate(0); 154 | } 155 | 88% { 156 | transform: translate(-9px, 0) rotate(0); 157 | } 158 | 90% { 159 | transform: translate(4px, 0) rotate(0); 160 | } 161 | 92% { 162 | transform: translate(10px, 0) rotate(0); 163 | } 164 | 94% { 165 | transform: translate(6px, 0) rotate(0); 166 | } 167 | 96% { 168 | transform: translate(-4px, 0) rotate(0); 169 | } 170 | 98% { 171 | transform: translate(-4px, 0) rotate(0); 172 | } 173 | 0%, 100% { 174 | transform: translate(0, 0) rotate(0); 175 | } 176 | } 177 | .shake-horizontal:hover, .shake-trigger:hover .shake-horizontal, .shake-horizontal.shake-freeze, .shake-horizontal.shake-constant { 178 | animation-name: shake-horizontal; 179 | animation-duration: 100ms; 180 | animation-timing-function: ease-in-out; 181 | animation-iteration-count: infinite; 182 | } 183 | 184 | /*# sourceMappingURL=csshake-horizontal.css.map */ 185 | -------------------------------------------------------------------------------- /dist/csshake-horizontal.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../scss/csshake-horizontal.scss","../scss/_tools.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACKA;EACE;EACA;;;AAGF;AAAA;AAAA;EAAY;;;AACZ;AAAA;EAAY;;;AA0CR;EASI;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EAOJ;IACE;;;AAQN;EAKE;EACA,oBAnDI;EAoDJ,2BAhDE;EAiDF,2BAlDE","file":"csshake-horizontal.css"} -------------------------------------------------------------------------------- /dist/csshake-horizontal.min.css: -------------------------------------------------------------------------------- 1 | /*! * * * * * * * * * * * * * * * * * * * *\ 2 | CSShake :: shake-horizontal 3 | v1.6.0 4 | CSS classes to move your DOM 5 | (c) 2015 @elrumordelaluz 6 | http://elrumordelaluz.github.io/csshake/ 7 | Licensed under MIT 8 | \* * * * * * * * * * * * * * * * * * * * */.shake-horizontal{display:inherit;transform-origin:center center}.shake-freeze,.shake-constant.shake-constant--hover:hover,.shake-trigger:hover .shake-constant.shake-constant--hover{animation-play-state:paused}.shake-horizontal:hover,.shake-trigger:hover .shake-horizontal,.shake-freeze:hover,.shake-trigger:hover .shake-freeze{animation-play-state:running}@keyframes shake-horizontal{2%{transform:translate(0px, 0) rotate(0)}4%{transform:translate(-9px, 0) rotate(0)}6%{transform:translate(9px, 0) rotate(0)}8%{transform:translate(1px, 0) rotate(0)}10%{transform:translate(7px, 0) rotate(0)}12%{transform:translate(7px, 0) rotate(0)}14%{transform:translate(7px, 0) rotate(0)}16%{transform:translate(-5px, 0) rotate(0)}18%{transform:translate(3px, 0) rotate(0)}20%{transform:translate(-2px, 0) rotate(0)}22%{transform:translate(-8px, 0) rotate(0)}24%{transform:translate(-5px, 0) rotate(0)}26%{transform:translate(-6px, 0) rotate(0)}28%{transform:translate(-6px, 0) rotate(0)}30%{transform:translate(2px, 0) rotate(0)}32%{transform:translate(-6px, 0) rotate(0)}34%{transform:translate(-6px, 0) rotate(0)}36%{transform:translate(1px, 0) rotate(0)}38%{transform:translate(-3px, 0) rotate(0)}40%{transform:translate(-3px, 0) rotate(0)}42%{transform:translate(1px, 0) rotate(0)}44%{transform:translate(-5px, 0) rotate(0)}46%{transform:translate(-2px, 0) rotate(0)}48%{transform:translate(-3px, 0) rotate(0)}50%{transform:translate(1px, 0) rotate(0)}52%{transform:translate(1px, 0) rotate(0)}54%{transform:translate(5px, 0) rotate(0)}56%{transform:translate(-3px, 0) rotate(0)}58%{transform:translate(3px, 0) rotate(0)}60%{transform:translate(-8px, 0) rotate(0)}62%{transform:translate(-5px, 0) rotate(0)}64%{transform:translate(-3px, 0) rotate(0)}66%{transform:translate(-3px, 0) rotate(0)}68%{transform:translate(-6px, 0) rotate(0)}70%{transform:translate(-4px, 0) rotate(0)}72%{transform:translate(-4px, 0) rotate(0)}74%{transform:translate(-4px, 0) rotate(0)}76%{transform:translate(7px, 0) rotate(0)}78%{transform:translate(-5px, 0) rotate(0)}80%{transform:translate(10px, 0) rotate(0)}82%{transform:translate(-3px, 0) rotate(0)}84%{transform:translate(-3px, 0) rotate(0)}86%{transform:translate(-4px, 0) rotate(0)}88%{transform:translate(-5px, 0) rotate(0)}90%{transform:translate(5px, 0) rotate(0)}92%{transform:translate(1px, 0) rotate(0)}94%{transform:translate(4px, 0) rotate(0)}96%{transform:translate(-8px, 0) rotate(0)}98%{transform:translate(-3px, 0) rotate(0)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-horizontal:hover,.shake-trigger:hover .shake-horizontal,.shake-horizontal.shake-freeze,.shake-horizontal.shake-constant{animation-name:shake-horizontal;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}/*# sourceMappingURL=csshake-horizontal.css.map */ 9 | -------------------------------------------------------------------------------- /dist/csshake-little.css: -------------------------------------------------------------------------------- 1 | /*! * * * * * * * * * * * * * * * * * * * *\ 2 | CSShake :: shake-little 3 | v1.6.0 4 | CSS classes to move your DOM 5 | (c) 2015 @elrumordelaluz 6 | http://elrumordelaluz.github.io/csshake/ 7 | Licensed under MIT 8 | \* * * * * * * * * * * * * * * * * * * * */ 9 | .shake-little { 10 | display: inherit; 11 | transform-origin: center center; 12 | } 13 | 14 | .shake-freeze, 15 | .shake-constant.shake-constant--hover:hover, 16 | .shake-trigger:hover .shake-constant.shake-constant--hover { 17 | animation-play-state: paused; 18 | } 19 | 20 | .shake-little:hover, .shake-trigger:hover .shake-little, .shake-freeze:hover, 21 | .shake-trigger:hover .shake-freeze { 22 | animation-play-state: running; 23 | } 24 | 25 | @keyframes shake-little { 26 | 2% { 27 | transform: translate(0px, 0px) rotate(0.5deg); 28 | } 29 | 4% { 30 | transform: translate(1px, 1px) rotate(0.5deg); 31 | } 32 | 6% { 33 | transform: translate(1px, 0px) rotate(0.5deg); 34 | } 35 | 8% { 36 | transform: translate(1px, 0px) rotate(0.5deg); 37 | } 38 | 10% { 39 | transform: translate(1px, 1px) rotate(0.5deg); 40 | } 41 | 12% { 42 | transform: translate(1px, 0px) rotate(0.5deg); 43 | } 44 | 14% { 45 | transform: translate(0px, 1px) rotate(0.5deg); 46 | } 47 | 16% { 48 | transform: translate(1px, 1px) rotate(0.5deg); 49 | } 50 | 18% { 51 | transform: translate(0px, 1px) rotate(0.5deg); 52 | } 53 | 20% { 54 | transform: translate(0px, 0px) rotate(0.5deg); 55 | } 56 | 22% { 57 | transform: translate(0px, 0px) rotate(0.5deg); 58 | } 59 | 24% { 60 | transform: translate(1px, 0px) rotate(0.5deg); 61 | } 62 | 26% { 63 | transform: translate(1px, 1px) rotate(0.5deg); 64 | } 65 | 28% { 66 | transform: translate(0px, 0px) rotate(0.5deg); 67 | } 68 | 30% { 69 | transform: translate(0px, 0px) rotate(0.5deg); 70 | } 71 | 32% { 72 | transform: translate(0px, 0px) rotate(0.5deg); 73 | } 74 | 34% { 75 | transform: translate(0px, 0px) rotate(0.5deg); 76 | } 77 | 36% { 78 | transform: translate(1px, 1px) rotate(0.5deg); 79 | } 80 | 38% { 81 | transform: translate(0px, 1px) rotate(0.5deg); 82 | } 83 | 40% { 84 | transform: translate(0px, 0px) rotate(0.5deg); 85 | } 86 | 42% { 87 | transform: translate(1px, 0px) rotate(0.5deg); 88 | } 89 | 44% { 90 | transform: translate(0px, 0px) rotate(0.5deg); 91 | } 92 | 46% { 93 | transform: translate(1px, 1px) rotate(0.5deg); 94 | } 95 | 48% { 96 | transform: translate(1px, 0px) rotate(0.5deg); 97 | } 98 | 50% { 99 | transform: translate(1px, 1px) rotate(0.5deg); 100 | } 101 | 52% { 102 | transform: translate(1px, 0px) rotate(0.5deg); 103 | } 104 | 54% { 105 | transform: translate(0px, 0px) rotate(0.5deg); 106 | } 107 | 56% { 108 | transform: translate(1px, 0px) rotate(0.5deg); 109 | } 110 | 58% { 111 | transform: translate(0px, 1px) rotate(0.5deg); 112 | } 113 | 60% { 114 | transform: translate(1px, 1px) rotate(0.5deg); 115 | } 116 | 62% { 117 | transform: translate(1px, 1px) rotate(0.5deg); 118 | } 119 | 64% { 120 | transform: translate(1px, 0px) rotate(0.5deg); 121 | } 122 | 66% { 123 | transform: translate(0px, 0px) rotate(0.5deg); 124 | } 125 | 68% { 126 | transform: translate(1px, 0px) rotate(0.5deg); 127 | } 128 | 70% { 129 | transform: translate(1px, 1px) rotate(0.5deg); 130 | } 131 | 72% { 132 | transform: translate(1px, 0px) rotate(0.5deg); 133 | } 134 | 74% { 135 | transform: translate(0px, 0px) rotate(0.5deg); 136 | } 137 | 76% { 138 | transform: translate(0px, 1px) rotate(0.5deg); 139 | } 140 | 78% { 141 | transform: translate(1px, 0px) rotate(0.5deg); 142 | } 143 | 80% { 144 | transform: translate(1px, 0px) rotate(0.5deg); 145 | } 146 | 82% { 147 | transform: translate(0px, 0px) rotate(0.5deg); 148 | } 149 | 84% { 150 | transform: translate(1px, 1px) rotate(0.5deg); 151 | } 152 | 86% { 153 | transform: translate(0px, 1px) rotate(0.5deg); 154 | } 155 | 88% { 156 | transform: translate(1px, 1px) rotate(0.5deg); 157 | } 158 | 90% { 159 | transform: translate(0px, 0px) rotate(0.5deg); 160 | } 161 | 92% { 162 | transform: translate(0px, 1px) rotate(0.5deg); 163 | } 164 | 94% { 165 | transform: translate(1px, 0px) rotate(0.5deg); 166 | } 167 | 96% { 168 | transform: translate(0px, 1px) rotate(0.5deg); 169 | } 170 | 98% { 171 | transform: translate(1px, 0px) rotate(0.5deg); 172 | } 173 | 0%, 100% { 174 | transform: translate(0, 0) rotate(0); 175 | } 176 | } 177 | .shake-little:hover, .shake-trigger:hover .shake-little, .shake-little.shake-freeze, .shake-little.shake-constant { 178 | animation-name: shake-little; 179 | animation-duration: 100ms; 180 | animation-timing-function: ease-in-out; 181 | animation-iteration-count: infinite; 182 | } 183 | 184 | /*# sourceMappingURL=csshake-little.css.map */ 185 | -------------------------------------------------------------------------------- /dist/csshake-little.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../scss/csshake-little.scss","../scss/_tools.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACKA;EACE;EACA;;;AAGF;AAAA;AAAA;EAAY;;;AACZ;AAAA;EAAY;;;AA0CR;EASI;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EAOJ;IACE;;;AAQN;EAKE;EACA,oBAnDI;EAoDJ,2BAhDE;EAiDF,2BAlDE","file":"csshake-little.css"} -------------------------------------------------------------------------------- /dist/csshake-little.min.css: -------------------------------------------------------------------------------- 1 | /*! * * * * * * * * * * * * * * * * * * * *\ 2 | CSShake :: shake-little 3 | v1.6.0 4 | CSS classes to move your DOM 5 | (c) 2015 @elrumordelaluz 6 | http://elrumordelaluz.github.io/csshake/ 7 | Licensed under MIT 8 | \* * * * * * * * * * * * * * * * * * * * */.shake-little{display:inherit;transform-origin:center center}.shake-freeze,.shake-constant.shake-constant--hover:hover,.shake-trigger:hover .shake-constant.shake-constant--hover{animation-play-state:paused}.shake-little:hover,.shake-trigger:hover .shake-little,.shake-freeze:hover,.shake-trigger:hover .shake-freeze{animation-play-state:running}@keyframes shake-little{2%{transform:translate(1px, 0px) rotate(0.5deg)}4%{transform:translate(1px, 1px) rotate(0.5deg)}6%{transform:translate(0px, 0px) rotate(0.5deg)}8%{transform:translate(0px, 1px) rotate(0.5deg)}10%{transform:translate(1px, 0px) rotate(0.5deg)}12%{transform:translate(0px, 0px) rotate(0.5deg)}14%{transform:translate(0px, 0px) rotate(0.5deg)}16%{transform:translate(0px, 1px) rotate(0.5deg)}18%{transform:translate(0px, 0px) rotate(0.5deg)}20%{transform:translate(0px, 1px) rotate(0.5deg)}22%{transform:translate(0px, 0px) rotate(0.5deg)}24%{transform:translate(0px, 1px) rotate(0.5deg)}26%{transform:translate(0px, 1px) rotate(0.5deg)}28%{transform:translate(1px, 0px) rotate(0.5deg)}30%{transform:translate(0px, 0px) rotate(0.5deg)}32%{transform:translate(0px, 0px) rotate(0.5deg)}34%{transform:translate(1px, 0px) rotate(0.5deg)}36%{transform:translate(0px, 1px) rotate(0.5deg)}38%{transform:translate(1px, 0px) rotate(0.5deg)}40%{transform:translate(0px, 0px) rotate(0.5deg)}42%{transform:translate(0px, 0px) rotate(0.5deg)}44%{transform:translate(1px, 1px) rotate(0.5deg)}46%{transform:translate(0px, 1px) rotate(0.5deg)}48%{transform:translate(0px, 0px) rotate(0.5deg)}50%{transform:translate(0px, 0px) rotate(0.5deg)}52%{transform:translate(0px, 0px) rotate(0.5deg)}54%{transform:translate(1px, 1px) rotate(0.5deg)}56%{transform:translate(1px, 0px) rotate(0.5deg)}58%{transform:translate(1px, 1px) rotate(0.5deg)}60%{transform:translate(1px, 1px) rotate(0.5deg)}62%{transform:translate(0px, 1px) rotate(0.5deg)}64%{transform:translate(1px, 0px) rotate(0.5deg)}66%{transform:translate(0px, 0px) rotate(0.5deg)}68%{transform:translate(0px, 0px) rotate(0.5deg)}70%{transform:translate(0px, 0px) rotate(0.5deg)}72%{transform:translate(1px, 1px) rotate(0.5deg)}74%{transform:translate(0px, 0px) rotate(0.5deg)}76%{transform:translate(0px, 0px) rotate(0.5deg)}78%{transform:translate(1px, 1px) rotate(0.5deg)}80%{transform:translate(0px, 1px) rotate(0.5deg)}82%{transform:translate(0px, 1px) rotate(0.5deg)}84%{transform:translate(0px, 0px) rotate(0.5deg)}86%{transform:translate(1px, 1px) rotate(0.5deg)}88%{transform:translate(1px, 0px) rotate(0.5deg)}90%{transform:translate(1px, 1px) rotate(0.5deg)}92%{transform:translate(1px, 0px) rotate(0.5deg)}94%{transform:translate(1px, 0px) rotate(0.5deg)}96%{transform:translate(1px, 0px) rotate(0.5deg)}98%{transform:translate(1px, 0px) rotate(0.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-little:hover,.shake-trigger:hover .shake-little,.shake-little.shake-freeze,.shake-little.shake-constant{animation-name:shake-little;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}/*# sourceMappingURL=csshake-little.css.map */ 9 | -------------------------------------------------------------------------------- /dist/csshake-rotate.css: -------------------------------------------------------------------------------- 1 | /*! * * * * * * * * * * * * * * * * * * * *\ 2 | CSShake :: shake-rotate 3 | v1.6.0 4 | CSS classes to move your DOM 5 | (c) 2015 @elrumordelaluz 6 | http://elrumordelaluz.github.io/csshake/ 7 | Licensed under MIT 8 | \* * * * * * * * * * * * * * * * * * * * */ 9 | .shake-rotate { 10 | display: inherit; 11 | transform-origin: center center; 12 | } 13 | 14 | .shake-freeze, 15 | .shake-constant.shake-constant--hover:hover, 16 | .shake-trigger:hover .shake-constant.shake-constant--hover { 17 | animation-play-state: paused; 18 | } 19 | 20 | .shake-rotate:hover, .shake-trigger:hover .shake-rotate, .shake-freeze:hover, 21 | .shake-trigger:hover .shake-freeze { 22 | animation-play-state: running; 23 | } 24 | 25 | @keyframes shake-rotate { 26 | 2% { 27 | transform: translate(0, 0) rotate(-3.5deg); 28 | } 29 | 4% { 30 | transform: translate(0, 0) rotate(6.5deg); 31 | } 32 | 6% { 33 | transform: translate(0, 0) rotate(2.5deg); 34 | } 35 | 8% { 36 | transform: translate(0, 0) rotate(4.5deg); 37 | } 38 | 10% { 39 | transform: translate(0, 0) rotate(4.5deg); 40 | } 41 | 12% { 42 | transform: translate(0, 0) rotate(5.5deg); 43 | } 44 | 14% { 45 | transform: translate(0, 0) rotate(1.5deg); 46 | } 47 | 16% { 48 | transform: translate(0, 0) rotate(-5.5deg); 49 | } 50 | 18% { 51 | transform: translate(0, 0) rotate(4.5deg); 52 | } 53 | 20% { 54 | transform: translate(0, 0) rotate(2.5deg); 55 | } 56 | 22% { 57 | transform: translate(0, 0) rotate(4.5deg); 58 | } 59 | 24% { 60 | transform: translate(0, 0) rotate(-4.5deg); 61 | } 62 | 26% { 63 | transform: translate(0, 0) rotate(-1.5deg); 64 | } 65 | 28% { 66 | transform: translate(0, 0) rotate(-1.5deg); 67 | } 68 | 30% { 69 | transform: translate(0, 0) rotate(0.5deg); 70 | } 71 | 32% { 72 | transform: translate(0, 0) rotate(-3.5deg); 73 | } 74 | 34% { 75 | transform: translate(0, 0) rotate(-1.5deg); 76 | } 77 | 36% { 78 | transform: translate(0, 0) rotate(6.5deg); 79 | } 80 | 38% { 81 | transform: translate(0, 0) rotate(-2.5deg); 82 | } 83 | 40% { 84 | transform: translate(0, 0) rotate(5.5deg); 85 | } 86 | 42% { 87 | transform: translate(0, 0) rotate(4.5deg); 88 | } 89 | 44% { 90 | transform: translate(0, 0) rotate(-6.5deg); 91 | } 92 | 46% { 93 | transform: translate(0, 0) rotate(7.5deg); 94 | } 95 | 48% { 96 | transform: translate(0, 0) rotate(2.5deg); 97 | } 98 | 50% { 99 | transform: translate(0, 0) rotate(-4.5deg); 100 | } 101 | 52% { 102 | transform: translate(0, 0) rotate(4.5deg); 103 | } 104 | 54% { 105 | transform: translate(0, 0) rotate(0.5deg); 106 | } 107 | 56% { 108 | transform: translate(0, 0) rotate(-0.5deg); 109 | } 110 | 58% { 111 | transform: translate(0, 0) rotate(-3.5deg); 112 | } 113 | 60% { 114 | transform: translate(0, 0) rotate(-3.5deg); 115 | } 116 | 62% { 117 | transform: translate(0, 0) rotate(3.5deg); 118 | } 119 | 64% { 120 | transform: translate(0, 0) rotate(-2.5deg); 121 | } 122 | 66% { 123 | transform: translate(0, 0) rotate(7.5deg); 124 | } 125 | 68% { 126 | transform: translate(0, 0) rotate(3.5deg); 127 | } 128 | 70% { 129 | transform: translate(0, 0) rotate(6.5deg); 130 | } 131 | 72% { 132 | transform: translate(0, 0) rotate(-3.5deg); 133 | } 134 | 74% { 135 | transform: translate(0, 0) rotate(-2.5deg); 136 | } 137 | 76% { 138 | transform: translate(0, 0) rotate(-5.5deg); 139 | } 140 | 78% { 141 | transform: translate(0, 0) rotate(1.5deg); 142 | } 143 | 80% { 144 | transform: translate(0, 0) rotate(-6.5deg); 145 | } 146 | 82% { 147 | transform: translate(0, 0) rotate(5.5deg); 148 | } 149 | 84% { 150 | transform: translate(0, 0) rotate(-6.5deg); 151 | } 152 | 86% { 153 | transform: translate(0, 0) rotate(-0.5deg); 154 | } 155 | 88% { 156 | transform: translate(0, 0) rotate(-5.5deg); 157 | } 158 | 90% { 159 | transform: translate(0, 0) rotate(-3.5deg); 160 | } 161 | 92% { 162 | transform: translate(0, 0) rotate(4.5deg); 163 | } 164 | 94% { 165 | transform: translate(0, 0) rotate(-4.5deg); 166 | } 167 | 96% { 168 | transform: translate(0, 0) rotate(-4.5deg); 169 | } 170 | 98% { 171 | transform: translate(0, 0) rotate(-4.5deg); 172 | } 173 | 0%, 100% { 174 | transform: translate(0, 0) rotate(0); 175 | } 176 | } 177 | .shake-rotate:hover, .shake-trigger:hover .shake-rotate, .shake-rotate.shake-freeze, .shake-rotate.shake-constant { 178 | animation-name: shake-rotate; 179 | animation-duration: 100ms; 180 | animation-timing-function: ease-in-out; 181 | animation-iteration-count: infinite; 182 | } 183 | 184 | /*# sourceMappingURL=csshake-rotate.css.map */ 185 | -------------------------------------------------------------------------------- /dist/csshake-rotate.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../scss/csshake-rotate.scss","../scss/_tools.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACKA;EACE;EACA;;;AAGF;AAAA;AAAA;EAAY;;;AACZ;AAAA;EAAY;;;AA0CR;EASI;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EAOJ;IACE;;;AAQN;EAKE;EACA,oBAnDI;EAoDJ,2BAhDE;EAiDF,2BAlDE","file":"csshake-rotate.css"} -------------------------------------------------------------------------------- /dist/csshake-rotate.min.css: -------------------------------------------------------------------------------- 1 | /*! * * * * * * * * * * * * * * * * * * * *\ 2 | CSShake :: shake-rotate 3 | v1.6.0 4 | CSS classes to move your DOM 5 | (c) 2015 @elrumordelaluz 6 | http://elrumordelaluz.github.io/csshake/ 7 | Licensed under MIT 8 | \* * * * * * * * * * * * * * * * * * * * */.shake-rotate{display:inherit;transform-origin:center center}.shake-freeze,.shake-constant.shake-constant--hover:hover,.shake-trigger:hover .shake-constant.shake-constant--hover{animation-play-state:paused}.shake-rotate:hover,.shake-trigger:hover .shake-rotate,.shake-freeze:hover,.shake-trigger:hover .shake-freeze{animation-play-state:running}@keyframes shake-rotate{2%{transform:translate(0, 0) rotate(3.5deg)}4%{transform:translate(0, 0) rotate(0.5deg)}6%{transform:translate(0, 0) rotate(7.5deg)}8%{transform:translate(0, 0) rotate(-0.5deg)}10%{transform:translate(0, 0) rotate(0.5deg)}12%{transform:translate(0, 0) rotate(4.5deg)}14%{transform:translate(0, 0) rotate(5.5deg)}16%{transform:translate(0, 0) rotate(3.5deg)}18%{transform:translate(0, 0) rotate(-4.5deg)}20%{transform:translate(0, 0) rotate(6.5deg)}22%{transform:translate(0, 0) rotate(-6.5deg)}24%{transform:translate(0, 0) rotate(-0.5deg)}26%{transform:translate(0, 0) rotate(2.5deg)}28%{transform:translate(0, 0) rotate(-3.5deg)}30%{transform:translate(0, 0) rotate(-3.5deg)}32%{transform:translate(0, 0) rotate(-3.5deg)}34%{transform:translate(0, 0) rotate(6.5deg)}36%{transform:translate(0, 0) rotate(-2.5deg)}38%{transform:translate(0, 0) rotate(2.5deg)}40%{transform:translate(0, 0) rotate(-1.5deg)}42%{transform:translate(0, 0) rotate(5.5deg)}44%{transform:translate(0, 0) rotate(-6.5deg)}46%{transform:translate(0, 0) rotate(-5.5deg)}48%{transform:translate(0, 0) rotate(-1.5deg)}50%{transform:translate(0, 0) rotate(1.5deg)}52%{transform:translate(0, 0) rotate(1.5deg)}54%{transform:translate(0, 0) rotate(-4.5deg)}56%{transform:translate(0, 0) rotate(6.5deg)}58%{transform:translate(0, 0) rotate(-4.5deg)}60%{transform:translate(0, 0) rotate(-2.5deg)}62%{transform:translate(0, 0) rotate(3.5deg)}64%{transform:translate(0, 0) rotate(7.5deg)}66%{transform:translate(0, 0) rotate(-6.5deg)}68%{transform:translate(0, 0) rotate(1.5deg)}70%{transform:translate(0, 0) rotate(1.5deg)}72%{transform:translate(0, 0) rotate(0.5deg)}74%{transform:translate(0, 0) rotate(-2.5deg)}76%{transform:translate(0, 0) rotate(-4.5deg)}78%{transform:translate(0, 0) rotate(-5.5deg)}80%{transform:translate(0, 0) rotate(3.5deg)}82%{transform:translate(0, 0) rotate(5.5deg)}84%{transform:translate(0, 0) rotate(-5.5deg)}86%{transform:translate(0, 0) rotate(-0.5deg)}88%{transform:translate(0, 0) rotate(1.5deg)}90%{transform:translate(0, 0) rotate(2.5deg)}92%{transform:translate(0, 0) rotate(6.5deg)}94%{transform:translate(0, 0) rotate(6.5deg)}96%{transform:translate(0, 0) rotate(7.5deg)}98%{transform:translate(0, 0) rotate(3.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-rotate:hover,.shake-trigger:hover .shake-rotate,.shake-rotate.shake-freeze,.shake-rotate.shake-constant{animation-name:shake-rotate;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}/*# sourceMappingURL=csshake-rotate.css.map */ 9 | -------------------------------------------------------------------------------- /dist/csshake-slow.css: -------------------------------------------------------------------------------- 1 | /*! * * * * * * * * * * * * * * * * * * * *\ 2 | CSShake :: shake-slow 3 | v1.6.0 4 | CSS classes to move your DOM 5 | (c) 2015 @elrumordelaluz 6 | http://elrumordelaluz.github.io/csshake/ 7 | Licensed under MIT 8 | \* * * * * * * * * * * * * * * * * * * * */ 9 | .shake-slow { 10 | display: inherit; 11 | transform-origin: center center; 12 | } 13 | 14 | .shake-freeze, 15 | .shake-constant.shake-constant--hover:hover, 16 | .shake-trigger:hover .shake-constant.shake-constant--hover { 17 | animation-play-state: paused; 18 | } 19 | 20 | .shake-slow:hover, .shake-trigger:hover .shake-slow, .shake-freeze:hover, 21 | .shake-trigger:hover .shake-freeze { 22 | animation-play-state: running; 23 | } 24 | 25 | @keyframes shake-slow { 26 | 2% { 27 | transform: translate(10px, 3px) rotate(1.5deg); 28 | } 29 | 4% { 30 | transform: translate(-4px, -9px) rotate(-2.5deg); 31 | } 32 | 6% { 33 | transform: translate(1px, -1px) rotate(-1.5deg); 34 | } 35 | 8% { 36 | transform: translate(-3px, -5px) rotate(-0.5deg); 37 | } 38 | 10% { 39 | transform: translate(6px, -8px) rotate(-1.5deg); 40 | } 41 | 12% { 42 | transform: translate(-8px, 4px) rotate(0.5deg); 43 | } 44 | 14% { 45 | transform: translate(3px, 7px) rotate(-1.5deg); 46 | } 47 | 16% { 48 | transform: translate(10px, -1px) rotate(0.5deg); 49 | } 50 | 18% { 51 | transform: translate(5px, -5px) rotate(-1.5deg); 52 | } 53 | 20% { 54 | transform: translate(8px, -4px) rotate(-2.5deg); 55 | } 56 | 22% { 57 | transform: translate(0px, 2px) rotate(3.5deg); 58 | } 59 | 24% { 60 | transform: translate(-3px, -7px) rotate(-0.5deg); 61 | } 62 | 26% { 63 | transform: translate(-2px, 6px) rotate(-0.5deg); 64 | } 65 | 28% { 66 | transform: translate(-2px, -5px) rotate(0.5deg); 67 | } 68 | 30% { 69 | transform: translate(2px, 9px) rotate(1.5deg); 70 | } 71 | 32% { 72 | transform: translate(-9px, -2px) rotate(-0.5deg); 73 | } 74 | 34% { 75 | transform: translate(4px, 4px) rotate(3.5deg); 76 | } 77 | 36% { 78 | transform: translate(-9px, 9px) rotate(-2.5deg); 79 | } 80 | 38% { 81 | transform: translate(1px, -2px) rotate(-1.5deg); 82 | } 83 | 40% { 84 | transform: translate(-7px, 9px) rotate(2.5deg); 85 | } 86 | 42% { 87 | transform: translate(-8px, -7px) rotate(2.5deg); 88 | } 89 | 44% { 90 | transform: translate(1px, 7px) rotate(-0.5deg); 91 | } 92 | 46% { 93 | transform: translate(9px, -8px) rotate(-1.5deg); 94 | } 95 | 48% { 96 | transform: translate(1px, -7px) rotate(0.5deg); 97 | } 98 | 50% { 99 | transform: translate(0px, 1px) rotate(3.5deg); 100 | } 101 | 52% { 102 | transform: translate(1px, 7px) rotate(-2.5deg); 103 | } 104 | 54% { 105 | transform: translate(-4px, 1px) rotate(-1.5deg); 106 | } 107 | 56% { 108 | transform: translate(8px, 1px) rotate(-1.5deg); 109 | } 110 | 58% { 111 | transform: translate(5px, 0px) rotate(-0.5deg); 112 | } 113 | 60% { 114 | transform: translate(-8px, -1px) rotate(1.5deg); 115 | } 116 | 62% { 117 | transform: translate(0px, 9px) rotate(-0.5deg); 118 | } 119 | 64% { 120 | transform: translate(-2px, 7px) rotate(3.5deg); 121 | } 122 | 66% { 123 | transform: translate(10px, 1px) rotate(3.5deg); 124 | } 125 | 68% { 126 | transform: translate(10px, 7px) rotate(3.5deg); 127 | } 128 | 70% { 129 | transform: translate(2px, -5px) rotate(1.5deg); 130 | } 131 | 72% { 132 | transform: translate(-4px, 10px) rotate(0.5deg); 133 | } 134 | 74% { 135 | transform: translate(-8px, 0px) rotate(-1.5deg); 136 | } 137 | 76% { 138 | transform: translate(3px, 3px) rotate(-0.5deg); 139 | } 140 | 78% { 141 | transform: translate(-9px, -4px) rotate(-2.5deg); 142 | } 143 | 80% { 144 | transform: translate(5px, -2px) rotate(0.5deg); 145 | } 146 | 82% { 147 | transform: translate(-5px, -3px) rotate(2.5deg); 148 | } 149 | 84% { 150 | transform: translate(5px, 10px) rotate(1.5deg); 151 | } 152 | 86% { 153 | transform: translate(-8px, 4px) rotate(-2.5deg); 154 | } 155 | 88% { 156 | transform: translate(-9px, 2px) rotate(2.5deg); 157 | } 158 | 90% { 159 | transform: translate(10px, -4px) rotate(3.5deg); 160 | } 161 | 92% { 162 | transform: translate(-4px, -3px) rotate(-1.5deg); 163 | } 164 | 94% { 165 | transform: translate(4px, 8px) rotate(1.5deg); 166 | } 167 | 96% { 168 | transform: translate(7px, -4px) rotate(-2.5deg); 169 | } 170 | 98% { 171 | transform: translate(5px, -2px) rotate(-2.5deg); 172 | } 173 | 0%, 100% { 174 | transform: translate(0, 0) rotate(0); 175 | } 176 | } 177 | .shake-slow:hover, .shake-trigger:hover .shake-slow, .shake-slow.shake-freeze, .shake-slow.shake-constant { 178 | animation-name: shake-slow; 179 | animation-duration: 5s; 180 | animation-timing-function: ease-in-out; 181 | animation-iteration-count: infinite; 182 | } 183 | 184 | /*# sourceMappingURL=csshake-slow.css.map */ 185 | -------------------------------------------------------------------------------- /dist/csshake-slow.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../scss/csshake-slow.scss","../scss/_tools.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACKA;EACE;EACA;;;AAGF;AAAA;AAAA;EAAY;;;AACZ;AAAA;EAAY;;;AA0CR;EASI;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EAOJ;IACE;;;AAQN;EAKE;EACA,oBD3EqD;EC4ErD,2BAhDE;EAiDF,2BAlDE","file":"csshake-slow.css"} -------------------------------------------------------------------------------- /dist/csshake-slow.min.css: -------------------------------------------------------------------------------- 1 | /*! * * * * * * * * * * * * * * * * * * * *\ 2 | CSShake :: shake-slow 3 | v1.6.0 4 | CSS classes to move your DOM 5 | (c) 2015 @elrumordelaluz 6 | http://elrumordelaluz.github.io/csshake/ 7 | Licensed under MIT 8 | \* * * * * * * * * * * * * * * * * * * * */.shake-slow{display:inherit;transform-origin:center center}.shake-freeze,.shake-constant.shake-constant--hover:hover,.shake-trigger:hover .shake-constant.shake-constant--hover{animation-play-state:paused}.shake-slow:hover,.shake-trigger:hover .shake-slow,.shake-freeze:hover,.shake-trigger:hover .shake-freeze{animation-play-state:running}@keyframes shake-slow{2%{transform:translate(5px, 0px) rotate(2.5deg)}4%{transform:translate(-9px, -5px) rotate(3.5deg)}6%{transform:translate(8px, -2px) rotate(3.5deg)}8%{transform:translate(8px, -6px) rotate(-0.5deg)}10%{transform:translate(-9px, -4px) rotate(-2.5deg)}12%{transform:translate(-8px, -5px) rotate(3.5deg)}14%{transform:translate(-3px, 5px) rotate(1.5deg)}16%{transform:translate(3px, -8px) rotate(1.5deg)}18%{transform:translate(-3px, -1px) rotate(1.5deg)}20%{transform:translate(7px, -7px) rotate(-1.5deg)}22%{transform:translate(-3px, -1px) rotate(-2.5deg)}24%{transform:translate(-3px, -3px) rotate(0.5deg)}26%{transform:translate(6px, -5px) rotate(0.5deg)}28%{transform:translate(-9px, 9px) rotate(-2.5deg)}30%{transform:translate(-1px, -6px) rotate(-1.5deg)}32%{transform:translate(-1px, 9px) rotate(0.5deg)}34%{transform:translate(2px, 6px) rotate(-0.5deg)}36%{transform:translate(0px, -2px) rotate(-2.5deg)}38%{transform:translate(10px, 1px) rotate(-2.5deg)}40%{transform:translate(7px, 1px) rotate(0.5deg)}42%{transform:translate(7px, 1px) rotate(3.5deg)}44%{transform:translate(-3px, 6px) rotate(3.5deg)}46%{transform:translate(2px, -7px) rotate(3.5deg)}48%{transform:translate(-1px, 10px) rotate(1.5deg)}50%{transform:translate(-7px, -9px) rotate(3.5deg)}52%{transform:translate(-8px, 10px) rotate(0.5deg)}54%{transform:translate(3px, -3px) rotate(1.5deg)}56%{transform:translate(-7px, -8px) rotate(-2.5deg)}58%{transform:translate(10px, -6px) rotate(3.5deg)}60%{transform:translate(3px, 9px) rotate(-2.5deg)}62%{transform:translate(2px, -1px) rotate(-2.5deg)}64%{transform:translate(7px, 2px) rotate(-1.5deg)}66%{transform:translate(-4px, 3px) rotate(3.5deg)}68%{transform:translate(7px, 7px) rotate(-2.5deg)}70%{transform:translate(-2px, -4px) rotate(3.5deg)}72%{transform:translate(-1px, -4px) rotate(-2.5deg)}74%{transform:translate(-4px, -4px) rotate(-2.5deg)}76%{transform:translate(9px, 4px) rotate(-0.5deg)}78%{transform:translate(3px, 2px) rotate(-0.5deg)}80%{transform:translate(5px, -2px) rotate(0.5deg)}82%{transform:translate(7px, -8px) rotate(-0.5deg)}84%{transform:translate(5px, 6px) rotate(-2.5deg)}86%{transform:translate(-2px, 7px) rotate(3.5deg)}88%{transform:translate(-1px, 7px) rotate(1.5deg)}90%{transform:translate(-2px, 9px) rotate(-1.5deg)}92%{transform:translate(3px, 2px) rotate(-1.5deg)}94%{transform:translate(10px, -6px) rotate(-1.5deg)}96%{transform:translate(-7px, 8px) rotate(0.5deg)}98%{transform:translate(-8px, 3px) rotate(2.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-slow:hover,.shake-trigger:hover .shake-slow,.shake-slow.shake-freeze,.shake-slow.shake-constant{animation-name:shake-slow;animation-duration:5s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}/*# sourceMappingURL=csshake-slow.css.map */ 9 | -------------------------------------------------------------------------------- /dist/csshake-vertical.css: -------------------------------------------------------------------------------- 1 | /*! * * * * * * * * * * * * * * * * * * * *\ 2 | CSShake :: shake-vertical 3 | v1.6.0 4 | CSS classes to move your DOM 5 | (c) 2015 @elrumordelaluz 6 | http://elrumordelaluz.github.io/csshake/ 7 | Licensed under MIT 8 | \* * * * * * * * * * * * * * * * * * * * */ 9 | .shake-vertical { 10 | display: inherit; 11 | transform-origin: center center; 12 | } 13 | 14 | .shake-freeze, 15 | .shake-constant.shake-constant--hover:hover, 16 | .shake-trigger:hover .shake-constant.shake-constant--hover { 17 | animation-play-state: paused; 18 | } 19 | 20 | .shake-vertical:hover, .shake-trigger:hover .shake-vertical, .shake-freeze:hover, 21 | .shake-trigger:hover .shake-freeze { 22 | animation-play-state: running; 23 | } 24 | 25 | @keyframes shake-vertical { 26 | 2% { 27 | transform: translate(0, 0px) rotate(0); 28 | } 29 | 4% { 30 | transform: translate(0, 0px) rotate(0); 31 | } 32 | 6% { 33 | transform: translate(0, -5px) rotate(0); 34 | } 35 | 8% { 36 | transform: translate(0, -4px) rotate(0); 37 | } 38 | 10% { 39 | transform: translate(0, -9px) rotate(0); 40 | } 41 | 12% { 42 | transform: translate(0, 3px) rotate(0); 43 | } 44 | 14% { 45 | transform: translate(0, 9px) rotate(0); 46 | } 47 | 16% { 48 | transform: translate(0, -4px) rotate(0); 49 | } 50 | 18% { 51 | transform: translate(0, 10px) rotate(0); 52 | } 53 | 20% { 54 | transform: translate(0, 8px) rotate(0); 55 | } 56 | 22% { 57 | transform: translate(0, 4px) rotate(0); 58 | } 59 | 24% { 60 | transform: translate(0, -5px) rotate(0); 61 | } 62 | 26% { 63 | transform: translate(0, 4px) rotate(0); 64 | } 65 | 28% { 66 | transform: translate(0, 9px) rotate(0); 67 | } 68 | 30% { 69 | transform: translate(0, 7px) rotate(0); 70 | } 71 | 32% { 72 | transform: translate(0, 10px) rotate(0); 73 | } 74 | 34% { 75 | transform: translate(0, 1px) rotate(0); 76 | } 77 | 36% { 78 | transform: translate(0, -9px) rotate(0); 79 | } 80 | 38% { 81 | transform: translate(0, 4px) rotate(0); 82 | } 83 | 40% { 84 | transform: translate(0, 3px) rotate(0); 85 | } 86 | 42% { 87 | transform: translate(0, -5px) rotate(0); 88 | } 89 | 44% { 90 | transform: translate(0, -2px) rotate(0); 91 | } 92 | 46% { 93 | transform: translate(0, -1px) rotate(0); 94 | } 95 | 48% { 96 | transform: translate(0, 5px) rotate(0); 97 | } 98 | 50% { 99 | transform: translate(0, 7px) rotate(0); 100 | } 101 | 52% { 102 | transform: translate(0, -9px) rotate(0); 103 | } 104 | 54% { 105 | transform: translate(0, 7px) rotate(0); 106 | } 107 | 56% { 108 | transform: translate(0, 10px) rotate(0); 109 | } 110 | 58% { 111 | transform: translate(0, 4px) rotate(0); 112 | } 113 | 60% { 114 | transform: translate(0, -4px) rotate(0); 115 | } 116 | 62% { 117 | transform: translate(0, 6px) rotate(0); 118 | } 119 | 64% { 120 | transform: translate(0, -8px) rotate(0); 121 | } 122 | 66% { 123 | transform: translate(0, 9px) rotate(0); 124 | } 125 | 68% { 126 | transform: translate(0, 4px) rotate(0); 127 | } 128 | 70% { 129 | transform: translate(0, 1px) rotate(0); 130 | } 131 | 72% { 132 | transform: translate(0, 2px) rotate(0); 133 | } 134 | 74% { 135 | transform: translate(0, 5px) rotate(0); 136 | } 137 | 76% { 138 | transform: translate(0, -1px) rotate(0); 139 | } 140 | 78% { 141 | transform: translate(0, 9px) rotate(0); 142 | } 143 | 80% { 144 | transform: translate(0, 10px) rotate(0); 145 | } 146 | 82% { 147 | transform: translate(0, 10px) rotate(0); 148 | } 149 | 84% { 150 | transform: translate(0, -4px) rotate(0); 151 | } 152 | 86% { 153 | transform: translate(0, -3px) rotate(0); 154 | } 155 | 88% { 156 | transform: translate(0, 1px) rotate(0); 157 | } 158 | 90% { 159 | transform: translate(0, 10px) rotate(0); 160 | } 161 | 92% { 162 | transform: translate(0, -7px) rotate(0); 163 | } 164 | 94% { 165 | transform: translate(0, 10px) rotate(0); 166 | } 167 | 96% { 168 | transform: translate(0, 9px) rotate(0); 169 | } 170 | 98% { 171 | transform: translate(0, 10px) rotate(0); 172 | } 173 | 0%, 100% { 174 | transform: translate(0, 0) rotate(0); 175 | } 176 | } 177 | .shake-vertical:hover, .shake-trigger:hover .shake-vertical, .shake-vertical.shake-freeze, .shake-vertical.shake-constant { 178 | animation-name: shake-vertical; 179 | animation-duration: 100ms; 180 | animation-timing-function: ease-in-out; 181 | animation-iteration-count: infinite; 182 | } 183 | 184 | /*# sourceMappingURL=csshake-vertical.css.map */ 185 | -------------------------------------------------------------------------------- /dist/csshake-vertical.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../scss/csshake-vertical.scss","../scss/_tools.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACKA;EACE;EACA;;;AAGF;AAAA;AAAA;EAAY;;;AACZ;AAAA;EAAY;;;AA0CR;EASI;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EAOJ;IACE;;;AAQN;EAKE;EACA,oBAnDI;EAoDJ,2BAhDE;EAiDF,2BAlDE","file":"csshake-vertical.css"} -------------------------------------------------------------------------------- /dist/csshake-vertical.min.css: -------------------------------------------------------------------------------- 1 | /*! * * * * * * * * * * * * * * * * * * * *\ 2 | CSShake :: shake-vertical 3 | v1.6.0 4 | CSS classes to move your DOM 5 | (c) 2015 @elrumordelaluz 6 | http://elrumordelaluz.github.io/csshake/ 7 | Licensed under MIT 8 | \* * * * * * * * * * * * * * * * * * * * */.shake-vertical{display:inherit;transform-origin:center center}.shake-freeze,.shake-constant.shake-constant--hover:hover,.shake-trigger:hover .shake-constant.shake-constant--hover{animation-play-state:paused}.shake-vertical:hover,.shake-trigger:hover .shake-vertical,.shake-freeze:hover,.shake-trigger:hover .shake-freeze{animation-play-state:running}@keyframes shake-vertical{2%{transform:translate(0, -6px) rotate(0)}4%{transform:translate(0, -4px) rotate(0)}6%{transform:translate(0, -9px) rotate(0)}8%{transform:translate(0, 3px) rotate(0)}10%{transform:translate(0, -3px) rotate(0)}12%{transform:translate(0, 5px) rotate(0)}14%{transform:translate(0, -2px) rotate(0)}16%{transform:translate(0, 1px) rotate(0)}18%{transform:translate(0, -6px) rotate(0)}20%{transform:translate(0, -5px) rotate(0)}22%{transform:translate(0, -9px) rotate(0)}24%{transform:translate(0, 3px) rotate(0)}26%{transform:translate(0, 3px) rotate(0)}28%{transform:translate(0, 3px) rotate(0)}30%{transform:translate(0, 6px) rotate(0)}32%{transform:translate(0, 1px) rotate(0)}34%{transform:translate(0, 0px) rotate(0)}36%{transform:translate(0, 2px) rotate(0)}38%{transform:translate(0, 6px) rotate(0)}40%{transform:translate(0, -4px) rotate(0)}42%{transform:translate(0, -5px) rotate(0)}44%{transform:translate(0, 10px) rotate(0)}46%{transform:translate(0, 6px) rotate(0)}48%{transform:translate(0, 0px) rotate(0)}50%{transform:translate(0, 0px) rotate(0)}52%{transform:translate(0, -2px) rotate(0)}54%{transform:translate(0, 7px) rotate(0)}56%{transform:translate(0, -9px) rotate(0)}58%{transform:translate(0, 5px) rotate(0)}60%{transform:translate(0, -6px) rotate(0)}62%{transform:translate(0, 1px) rotate(0)}64%{transform:translate(0, -2px) rotate(0)}66%{transform:translate(0, -2px) rotate(0)}68%{transform:translate(0, 5px) rotate(0)}70%{transform:translate(0, 5px) rotate(0)}72%{transform:translate(0, 0px) rotate(0)}74%{transform:translate(0, -1px) rotate(0)}76%{transform:translate(0, 2px) rotate(0)}78%{transform:translate(0, 7px) rotate(0)}80%{transform:translate(0, 5px) rotate(0)}82%{transform:translate(0, 10px) rotate(0)}84%{transform:translate(0, 6px) rotate(0)}86%{transform:translate(0, -4px) rotate(0)}88%{transform:translate(0, 1px) rotate(0)}90%{transform:translate(0, 0px) rotate(0)}92%{transform:translate(0, -9px) rotate(0)}94%{transform:translate(0, 0px) rotate(0)}96%{transform:translate(0, 10px) rotate(0)}98%{transform:translate(0, -4px) rotate(0)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-vertical:hover,.shake-trigger:hover .shake-vertical,.shake-vertical.shake-freeze,.shake-vertical.shake-constant{animation-name:shake-vertical;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}/*# sourceMappingURL=csshake-vertical.css.map */ 9 | -------------------------------------------------------------------------------- /dist/csshake.css: -------------------------------------------------------------------------------- 1 | /*! * * * * * * * * * * * * * * * * * * * *\ 2 | CSShake :: Package 3 | v1.6.0 4 | CSS classes to move your DOM 5 | (c) 2015 @elrumordelaluz 6 | http://elrumordelaluz.github.io/csshake/ 7 | Licensed under MIT 8 | \* * * * * * * * * * * * * * * * * * * * */ 9 | .shake-chunk, .shake-crazy, .shake-opacity, .shake-rotate, .shake-vertical, .shake-horizontal, .shake-hard, .shake-slow, .shake-little, .shake { 10 | display: inherit; 11 | transform-origin: center center; 12 | } 13 | 14 | .shake-freeze, 15 | .shake-constant.shake-constant--hover:hover, 16 | .shake-trigger:hover .shake-constant.shake-constant--hover { 17 | animation-play-state: paused; 18 | } 19 | 20 | .shake-chunk:hover, .shake-trigger:hover .shake-chunk, .shake-crazy:hover, .shake-trigger:hover .shake-crazy, .shake-opacity:hover, .shake-trigger:hover .shake-opacity, .shake-rotate:hover, .shake-trigger:hover .shake-rotate, .shake-vertical:hover, .shake-trigger:hover .shake-vertical, .shake-horizontal:hover, .shake-trigger:hover .shake-horizontal, .shake-hard:hover, .shake-trigger:hover .shake-hard, .shake-slow:hover, .shake-trigger:hover .shake-slow, .shake-little:hover, .shake-trigger:hover .shake-little, .shake:hover, .shake-trigger:hover .shake, .shake-freeze:hover, 21 | .shake-trigger:hover .shake-freeze { 22 | animation-play-state: running; 23 | } 24 | 25 | @keyframes shake { 26 | 2% { 27 | transform: translate(2.5px, -1.5px) rotate(1.5deg); 28 | } 29 | 4% { 30 | transform: translate(-0.5px, -0.5px) rotate(0.5deg); 31 | } 32 | 6% { 33 | transform: translate(-0.5px, 2.5px) rotate(-0.5deg); 34 | } 35 | 8% { 36 | transform: translate(-0.5px, -1.5px) rotate(0.5deg); 37 | } 38 | 10% { 39 | transform: translate(-0.5px, 0.5px) rotate(-0.5deg); 40 | } 41 | 12% { 42 | transform: translate(0.5px, -1.5px) rotate(-0.5deg); 43 | } 44 | 14% { 45 | transform: translate(2.5px, 2.5px) rotate(0.5deg); 46 | } 47 | 16% { 48 | transform: translate(1.5px, -0.5px) rotate(0.5deg); 49 | } 50 | 18% { 51 | transform: translate(-1.5px, 2.5px) rotate(1.5deg); 52 | } 53 | 20% { 54 | transform: translate(1.5px, 2.5px) rotate(1.5deg); 55 | } 56 | 22% { 57 | transform: translate(2.5px, -1.5px) rotate(0.5deg); 58 | } 59 | 24% { 60 | transform: translate(-0.5px, 1.5px) rotate(1.5deg); 61 | } 62 | 26% { 63 | transform: translate(1.5px, -0.5px) rotate(-0.5deg); 64 | } 65 | 28% { 66 | transform: translate(0.5px, 1.5px) rotate(0.5deg); 67 | } 68 | 30% { 69 | transform: translate(0.5px, -1.5px) rotate(1.5deg); 70 | } 71 | 32% { 72 | transform: translate(0.5px, 0.5px) rotate(0.5deg); 73 | } 74 | 34% { 75 | transform: translate(-0.5px, 2.5px) rotate(1.5deg); 76 | } 77 | 36% { 78 | transform: translate(2.5px, 2.5px) rotate(1.5deg); 79 | } 80 | 38% { 81 | transform: translate(-0.5px, 0.5px) rotate(1.5deg); 82 | } 83 | 40% { 84 | transform: translate(-1.5px, -1.5px) rotate(1.5deg); 85 | } 86 | 42% { 87 | transform: translate(-1.5px, -0.5px) rotate(0.5deg); 88 | } 89 | 44% { 90 | transform: translate(0.5px, -0.5px) rotate(1.5deg); 91 | } 92 | 46% { 93 | transform: translate(1.5px, 1.5px) rotate(-0.5deg); 94 | } 95 | 48% { 96 | transform: translate(-1.5px, -1.5px) rotate(-0.5deg); 97 | } 98 | 50% { 99 | transform: translate(2.5px, 2.5px) rotate(1.5deg); 100 | } 101 | 52% { 102 | transform: translate(2.5px, -0.5px) rotate(0.5deg); 103 | } 104 | 54% { 105 | transform: translate(-1.5px, -1.5px) rotate(0.5deg); 106 | } 107 | 56% { 108 | transform: translate(-0.5px, 0.5px) rotate(1.5deg); 109 | } 110 | 58% { 111 | transform: translate(-0.5px, -0.5px) rotate(1.5deg); 112 | } 113 | 60% { 114 | transform: translate(-0.5px, 2.5px) rotate(1.5deg); 115 | } 116 | 62% { 117 | transform: translate(-0.5px, -0.5px) rotate(0.5deg); 118 | } 119 | 64% { 120 | transform: translate(1.5px, 0.5px) rotate(-0.5deg); 121 | } 122 | 66% { 123 | transform: translate(-1.5px, -1.5px) rotate(0.5deg); 124 | } 125 | 68% { 126 | transform: translate(-0.5px, 0.5px) rotate(0.5deg); 127 | } 128 | 70% { 129 | transform: translate(-0.5px, -0.5px) rotate(1.5deg); 130 | } 131 | 72% { 132 | transform: translate(-1.5px, 2.5px) rotate(1.5deg); 133 | } 134 | 74% { 135 | transform: translate(-0.5px, 0.5px) rotate(0.5deg); 136 | } 137 | 76% { 138 | transform: translate(-0.5px, -1.5px) rotate(0.5deg); 139 | } 140 | 78% { 141 | transform: translate(1.5px, 1.5px) rotate(1.5deg); 142 | } 143 | 80% { 144 | transform: translate(2.5px, -0.5px) rotate(0.5deg); 145 | } 146 | 82% { 147 | transform: translate(1.5px, 1.5px) rotate(0.5deg); 148 | } 149 | 84% { 150 | transform: translate(2.5px, -1.5px) rotate(0.5deg); 151 | } 152 | 86% { 153 | transform: translate(-1.5px, -0.5px) rotate(1.5deg); 154 | } 155 | 88% { 156 | transform: translate(2.5px, -1.5px) rotate(0.5deg); 157 | } 158 | 90% { 159 | transform: translate(-0.5px, 2.5px) rotate(-0.5deg); 160 | } 161 | 92% { 162 | transform: translate(1.5px, 2.5px) rotate(1.5deg); 163 | } 164 | 94% { 165 | transform: translate(1.5px, -1.5px) rotate(1.5deg); 166 | } 167 | 96% { 168 | transform: translate(2.5px, 0.5px) rotate(0.5deg); 169 | } 170 | 98% { 171 | transform: translate(0.5px, 1.5px) rotate(1.5deg); 172 | } 173 | 0%, 100% { 174 | transform: translate(0, 0) rotate(0); 175 | } 176 | } 177 | .shake:hover, .shake-trigger:hover .shake, .shake.shake-freeze, .shake.shake-constant { 178 | animation-name: shake; 179 | animation-duration: 100ms; 180 | animation-timing-function: ease-in-out; 181 | animation-iteration-count: infinite; 182 | } 183 | @keyframes shake-little { 184 | 2% { 185 | transform: translate(0px, 1px) rotate(0.5deg); 186 | } 187 | 4% { 188 | transform: translate(0px, 0px) rotate(0.5deg); 189 | } 190 | 6% { 191 | transform: translate(0px, 0px) rotate(0.5deg); 192 | } 193 | 8% { 194 | transform: translate(0px, 0px) rotate(0.5deg); 195 | } 196 | 10% { 197 | transform: translate(1px, 0px) rotate(0.5deg); 198 | } 199 | 12% { 200 | transform: translate(1px, 1px) rotate(0.5deg); 201 | } 202 | 14% { 203 | transform: translate(0px, 1px) rotate(0.5deg); 204 | } 205 | 16% { 206 | transform: translate(1px, 0px) rotate(0.5deg); 207 | } 208 | 18% { 209 | transform: translate(0px, 1px) rotate(0.5deg); 210 | } 211 | 20% { 212 | transform: translate(0px, 1px) rotate(0.5deg); 213 | } 214 | 22% { 215 | transform: translate(0px, 0px) rotate(0.5deg); 216 | } 217 | 24% { 218 | transform: translate(0px, 1px) rotate(0.5deg); 219 | } 220 | 26% { 221 | transform: translate(1px, 1px) rotate(0.5deg); 222 | } 223 | 28% { 224 | transform: translate(1px, 0px) rotate(0.5deg); 225 | } 226 | 30% { 227 | transform: translate(0px, 1px) rotate(0.5deg); 228 | } 229 | 32% { 230 | transform: translate(0px, 1px) rotate(0.5deg); 231 | } 232 | 34% { 233 | transform: translate(1px, 1px) rotate(0.5deg); 234 | } 235 | 36% { 236 | transform: translate(0px, 0px) rotate(0.5deg); 237 | } 238 | 38% { 239 | transform: translate(0px, 0px) rotate(0.5deg); 240 | } 241 | 40% { 242 | transform: translate(1px, 0px) rotate(0.5deg); 243 | } 244 | 42% { 245 | transform: translate(1px, 1px) rotate(0.5deg); 246 | } 247 | 44% { 248 | transform: translate(1px, 1px) rotate(0.5deg); 249 | } 250 | 46% { 251 | transform: translate(0px, 0px) rotate(0.5deg); 252 | } 253 | 48% { 254 | transform: translate(0px, 1px) rotate(0.5deg); 255 | } 256 | 50% { 257 | transform: translate(0px, 1px) rotate(0.5deg); 258 | } 259 | 52% { 260 | transform: translate(0px, 0px) rotate(0.5deg); 261 | } 262 | 54% { 263 | transform: translate(1px, 1px) rotate(0.5deg); 264 | } 265 | 56% { 266 | transform: translate(1px, 0px) rotate(0.5deg); 267 | } 268 | 58% { 269 | transform: translate(0px, 1px) rotate(0.5deg); 270 | } 271 | 60% { 272 | transform: translate(0px, 1px) rotate(0.5deg); 273 | } 274 | 62% { 275 | transform: translate(0px, 0px) rotate(0.5deg); 276 | } 277 | 64% { 278 | transform: translate(1px, 0px) rotate(0.5deg); 279 | } 280 | 66% { 281 | transform: translate(0px, 1px) rotate(0.5deg); 282 | } 283 | 68% { 284 | transform: translate(1px, 1px) rotate(0.5deg); 285 | } 286 | 70% { 287 | transform: translate(0px, 0px) rotate(0.5deg); 288 | } 289 | 72% { 290 | transform: translate(1px, 1px) rotate(0.5deg); 291 | } 292 | 74% { 293 | transform: translate(1px, 1px) rotate(0.5deg); 294 | } 295 | 76% { 296 | transform: translate(1px, 0px) rotate(0.5deg); 297 | } 298 | 78% { 299 | transform: translate(1px, 0px) rotate(0.5deg); 300 | } 301 | 80% { 302 | transform: translate(1px, 0px) rotate(0.5deg); 303 | } 304 | 82% { 305 | transform: translate(0px, 0px) rotate(0.5deg); 306 | } 307 | 84% { 308 | transform: translate(0px, 1px) rotate(0.5deg); 309 | } 310 | 86% { 311 | transform: translate(1px, 0px) rotate(0.5deg); 312 | } 313 | 88% { 314 | transform: translate(1px, 0px) rotate(0.5deg); 315 | } 316 | 90% { 317 | transform: translate(1px, 0px) rotate(0.5deg); 318 | } 319 | 92% { 320 | transform: translate(0px, 1px) rotate(0.5deg); 321 | } 322 | 94% { 323 | transform: translate(0px, 0px) rotate(0.5deg); 324 | } 325 | 96% { 326 | transform: translate(1px, 0px) rotate(0.5deg); 327 | } 328 | 98% { 329 | transform: translate(1px, 0px) rotate(0.5deg); 330 | } 331 | 0%, 100% { 332 | transform: translate(0, 0) rotate(0); 333 | } 334 | } 335 | .shake-little:hover, .shake-trigger:hover .shake-little, .shake-little.shake-freeze, .shake-little.shake-constant { 336 | animation-name: shake-little; 337 | animation-duration: 100ms; 338 | animation-timing-function: ease-in-out; 339 | animation-iteration-count: infinite; 340 | } 341 | @keyframes shake-slow { 342 | 2% { 343 | transform: translate(8px, -4px) rotate(-1.5deg); 344 | } 345 | 4% { 346 | transform: translate(-4px, 10px) rotate(0.5deg); 347 | } 348 | 6% { 349 | transform: translate(4px, -6px) rotate(-1.5deg); 350 | } 351 | 8% { 352 | transform: translate(9px, 0px) rotate(2.5deg); 353 | } 354 | 10% { 355 | transform: translate(-5px, -2px) rotate(1.5deg); 356 | } 357 | 12% { 358 | transform: translate(5px, -8px) rotate(-0.5deg); 359 | } 360 | 14% { 361 | transform: translate(10px, -2px) rotate(-2.5deg); 362 | } 363 | 16% { 364 | transform: translate(0px, 6px) rotate(0.5deg); 365 | } 366 | 18% { 367 | transform: translate(-5px, 10px) rotate(0.5deg); 368 | } 369 | 20% { 370 | transform: translate(9px, 2px) rotate(2.5deg); 371 | } 372 | 22% { 373 | transform: translate(-1px, 0px) rotate(-0.5deg); 374 | } 375 | 24% { 376 | transform: translate(7px, 4px) rotate(1.5deg); 377 | } 378 | 26% { 379 | transform: translate(-1px, 7px) rotate(1.5deg); 380 | } 381 | 28% { 382 | transform: translate(10px, -9px) rotate(0.5deg); 383 | } 384 | 30% { 385 | transform: translate(4px, 4px) rotate(-2.5deg); 386 | } 387 | 32% { 388 | transform: translate(-8px, 0px) rotate(0.5deg); 389 | } 390 | 34% { 391 | transform: translate(-8px, -2px) rotate(2.5deg); 392 | } 393 | 36% { 394 | transform: translate(-6px, -7px) rotate(1.5deg); 395 | } 396 | 38% { 397 | transform: translate(10px, -7px) rotate(2.5deg); 398 | } 399 | 40% { 400 | transform: translate(-7px, -8px) rotate(-1.5deg); 401 | } 402 | 42% { 403 | transform: translate(-9px, -3px) rotate(-0.5deg); 404 | } 405 | 44% { 406 | transform: translate(5px, -3px) rotate(-2.5deg); 407 | } 408 | 46% { 409 | transform: translate(-4px, 2px) rotate(3.5deg); 410 | } 411 | 48% { 412 | transform: translate(-7px, -1px) rotate(-0.5deg); 413 | } 414 | 50% { 415 | transform: translate(0px, -4px) rotate(2.5deg); 416 | } 417 | 52% { 418 | transform: translate(8px, -2px) rotate(2.5deg); 419 | } 420 | 54% { 421 | transform: translate(9px, 3px) rotate(-0.5deg); 422 | } 423 | 56% { 424 | transform: translate(-1px, 1px) rotate(-1.5deg); 425 | } 426 | 58% { 427 | transform: translate(1px, 6px) rotate(-2.5deg); 428 | } 429 | 60% { 430 | transform: translate(-6px, 7px) rotate(1.5deg); 431 | } 432 | 62% { 433 | transform: translate(2px, -4px) rotate(-1.5deg); 434 | } 435 | 64% { 436 | transform: translate(10px, 8px) rotate(3.5deg); 437 | } 438 | 66% { 439 | transform: translate(-7px, 4px) rotate(3.5deg); 440 | } 441 | 68% { 442 | transform: translate(-7px, -8px) rotate(0.5deg); 443 | } 444 | 70% { 445 | transform: translate(8px, -6px) rotate(0.5deg); 446 | } 447 | 72% { 448 | transform: translate(8px, -9px) rotate(-0.5deg); 449 | } 450 | 74% { 451 | transform: translate(-1px, -4px) rotate(2.5deg); 452 | } 453 | 76% { 454 | transform: translate(10px, -9px) rotate(-2.5deg); 455 | } 456 | 78% { 457 | transform: translate(-5px, -8px) rotate(-1.5deg); 458 | } 459 | 80% { 460 | transform: translate(5px, 0px) rotate(-0.5deg); 461 | } 462 | 82% { 463 | transform: translate(-3px, 5px) rotate(3.5deg); 464 | } 465 | 84% { 466 | transform: translate(4px, 1px) rotate(2.5deg); 467 | } 468 | 86% { 469 | transform: translate(-1px, 0px) rotate(-2.5deg); 470 | } 471 | 88% { 472 | transform: translate(8px, 10px) rotate(-1.5deg); 473 | } 474 | 90% { 475 | transform: translate(8px, -1px) rotate(-0.5deg); 476 | } 477 | 92% { 478 | transform: translate(5px, 7px) rotate(-0.5deg); 479 | } 480 | 94% { 481 | transform: translate(-1px, -1px) rotate(0.5deg); 482 | } 483 | 96% { 484 | transform: translate(-8px, -2px) rotate(-1.5deg); 485 | } 486 | 98% { 487 | transform: translate(6px, -9px) rotate(-0.5deg); 488 | } 489 | 0%, 100% { 490 | transform: translate(0, 0) rotate(0); 491 | } 492 | } 493 | .shake-slow:hover, .shake-trigger:hover .shake-slow, .shake-slow.shake-freeze, .shake-slow.shake-constant { 494 | animation-name: shake-slow; 495 | animation-duration: 5s; 496 | animation-timing-function: ease-in-out; 497 | animation-iteration-count: infinite; 498 | } 499 | @keyframes shake-hard { 500 | 2% { 501 | transform: translate(4px, 5px) rotate(-1.5deg); 502 | } 503 | 4% { 504 | transform: translate(-5px, -7px) rotate(-2.5deg); 505 | } 506 | 6% { 507 | transform: translate(2px, 2px) rotate(0.5deg); 508 | } 509 | 8% { 510 | transform: translate(-7px, -9px) rotate(3.5deg); 511 | } 512 | 10% { 513 | transform: translate(1px, -1px) rotate(-2.5deg); 514 | } 515 | 12% { 516 | transform: translate(8px, 5px) rotate(2.5deg); 517 | } 518 | 14% { 519 | transform: translate(-2px, 6px) rotate(-1.5deg); 520 | } 521 | 16% { 522 | transform: translate(5px, 3px) rotate(2.5deg); 523 | } 524 | 18% { 525 | transform: translate(0px, 6px) rotate(-0.5deg); 526 | } 527 | 20% { 528 | transform: translate(6px, -6px) rotate(1.5deg); 529 | } 530 | 22% { 531 | transform: translate(-6px, 8px) rotate(-2.5deg); 532 | } 533 | 24% { 534 | transform: translate(0px, -1px) rotate(-2.5deg); 535 | } 536 | 26% { 537 | transform: translate(3px, -6px) rotate(-1.5deg); 538 | } 539 | 28% { 540 | transform: translate(6px, 2px) rotate(-1.5deg); 541 | } 542 | 30% { 543 | transform: translate(-1px, 4px) rotate(-0.5deg); 544 | } 545 | 32% { 546 | transform: translate(-2px, 9px) rotate(0.5deg); 547 | } 548 | 34% { 549 | transform: translate(5px, -9px) rotate(0.5deg); 550 | } 551 | 36% { 552 | transform: translate(1px, 1px) rotate(-1.5deg); 553 | } 554 | 38% { 555 | transform: translate(0px, 5px) rotate(-1.5deg); 556 | } 557 | 40% { 558 | transform: translate(-8px, 4px) rotate(1.5deg); 559 | } 560 | 42% { 561 | transform: translate(1px, 2px) rotate(0.5deg); 562 | } 563 | 44% { 564 | transform: translate(-7px, 10px) rotate(-1.5deg); 565 | } 566 | 46% { 567 | transform: translate(9px, 3px) rotate(0.5deg); 568 | } 569 | 48% { 570 | transform: translate(-8px, 10px) rotate(-2.5deg); 571 | } 572 | 50% { 573 | transform: translate(-8px, -7px) rotate(3.5deg); 574 | } 575 | 52% { 576 | transform: translate(-2px, 3px) rotate(-1.5deg); 577 | } 578 | 54% { 579 | transform: translate(4px, 3px) rotate(-2.5deg); 580 | } 581 | 56% { 582 | transform: translate(-2px, 9px) rotate(-0.5deg); 583 | } 584 | 58% { 585 | transform: translate(5px, 6px) rotate(2.5deg); 586 | } 587 | 60% { 588 | transform: translate(2px, -2px) rotate(-2.5deg); 589 | } 590 | 62% { 591 | transform: translate(-5px, -4px) rotate(1.5deg); 592 | } 593 | 64% { 594 | transform: translate(4px, 1px) rotate(-1.5deg); 595 | } 596 | 66% { 597 | transform: translate(-9px, 0px) rotate(-2.5deg); 598 | } 599 | 68% { 600 | transform: translate(9px, 9px) rotate(1.5deg); 601 | } 602 | 70% { 603 | transform: translate(0px, 0px) rotate(-2.5deg); 604 | } 605 | 72% { 606 | transform: translate(10px, -9px) rotate(-0.5deg); 607 | } 608 | 74% { 609 | transform: translate(6px, 6px) rotate(0.5deg); 610 | } 611 | 76% { 612 | transform: translate(-6px, 3px) rotate(3.5deg); 613 | } 614 | 78% { 615 | transform: translate(-1px, -8px) rotate(0.5deg); 616 | } 617 | 80% { 618 | transform: translate(-9px, -8px) rotate(2.5deg); 619 | } 620 | 82% { 621 | transform: translate(-6px, -8px) rotate(-2.5deg); 622 | } 623 | 84% { 624 | transform: translate(0px, 2px) rotate(0.5deg); 625 | } 626 | 86% { 627 | transform: translate(7px, -5px) rotate(0.5deg); 628 | } 629 | 88% { 630 | transform: translate(0px, -3px) rotate(-1.5deg); 631 | } 632 | 90% { 633 | transform: translate(-2px, -3px) rotate(1.5deg); 634 | } 635 | 92% { 636 | transform: translate(-7px, -4px) rotate(3.5deg); 637 | } 638 | 94% { 639 | transform: translate(-3px, -5px) rotate(3.5deg); 640 | } 641 | 96% { 642 | transform: translate(3px, -4px) rotate(-0.5deg); 643 | } 644 | 98% { 645 | transform: translate(8px, -4px) rotate(-1.5deg); 646 | } 647 | 0%, 100% { 648 | transform: translate(0, 0) rotate(0); 649 | } 650 | } 651 | .shake-hard:hover, .shake-trigger:hover .shake-hard, .shake-hard.shake-freeze, .shake-hard.shake-constant { 652 | animation-name: shake-hard; 653 | animation-duration: 100ms; 654 | animation-timing-function: ease-in-out; 655 | animation-iteration-count: infinite; 656 | } 657 | @keyframes shake-horizontal { 658 | 2% { 659 | transform: translate(-2px, 0) rotate(0); 660 | } 661 | 4% { 662 | transform: translate(-6px, 0) rotate(0); 663 | } 664 | 6% { 665 | transform: translate(6px, 0) rotate(0); 666 | } 667 | 8% { 668 | transform: translate(6px, 0) rotate(0); 669 | } 670 | 10% { 671 | transform: translate(-3px, 0) rotate(0); 672 | } 673 | 12% { 674 | transform: translate(8px, 0) rotate(0); 675 | } 676 | 14% { 677 | transform: translate(3px, 0) rotate(0); 678 | } 679 | 16% { 680 | transform: translate(0px, 0) rotate(0); 681 | } 682 | 18% { 683 | transform: translate(10px, 0) rotate(0); 684 | } 685 | 20% { 686 | transform: translate(-5px, 0) rotate(0); 687 | } 688 | 22% { 689 | transform: translate(7px, 0) rotate(0); 690 | } 691 | 24% { 692 | transform: translate(10px, 0) rotate(0); 693 | } 694 | 26% { 695 | transform: translate(-4px, 0) rotate(0); 696 | } 697 | 28% { 698 | transform: translate(10px, 0) rotate(0); 699 | } 700 | 30% { 701 | transform: translate(-9px, 0) rotate(0); 702 | } 703 | 32% { 704 | transform: translate(9px, 0) rotate(0); 705 | } 706 | 34% { 707 | transform: translate(-1px, 0) rotate(0); 708 | } 709 | 36% { 710 | transform: translate(-1px, 0) rotate(0); 711 | } 712 | 38% { 713 | transform: translate(10px, 0) rotate(0); 714 | } 715 | 40% { 716 | transform: translate(-2px, 0) rotate(0); 717 | } 718 | 42% { 719 | transform: translate(2px, 0) rotate(0); 720 | } 721 | 44% { 722 | transform: translate(-8px, 0) rotate(0); 723 | } 724 | 46% { 725 | transform: translate(-8px, 0) rotate(0); 726 | } 727 | 48% { 728 | transform: translate(-3px, 0) rotate(0); 729 | } 730 | 50% { 731 | transform: translate(3px, 0) rotate(0); 732 | } 733 | 52% { 734 | transform: translate(-1px, 0) rotate(0); 735 | } 736 | 54% { 737 | transform: translate(7px, 0) rotate(0); 738 | } 739 | 56% { 740 | transform: translate(-2px, 0) rotate(0); 741 | } 742 | 58% { 743 | transform: translate(4px, 0) rotate(0); 744 | } 745 | 60% { 746 | transform: translate(-3px, 0) rotate(0); 747 | } 748 | 62% { 749 | transform: translate(-5px, 0) rotate(0); 750 | } 751 | 64% { 752 | transform: translate(-2px, 0) rotate(0); 753 | } 754 | 66% { 755 | transform: translate(1px, 0) rotate(0); 756 | } 757 | 68% { 758 | transform: translate(-1px, 0) rotate(0); 759 | } 760 | 70% { 761 | transform: translate(-1px, 0) rotate(0); 762 | } 763 | 72% { 764 | transform: translate(0px, 0) rotate(0); 765 | } 766 | 74% { 767 | transform: translate(3px, 0) rotate(0); 768 | } 769 | 76% { 770 | transform: translate(5px, 0) rotate(0); 771 | } 772 | 78% { 773 | transform: translate(9px, 0) rotate(0); 774 | } 775 | 80% { 776 | transform: translate(2px, 0) rotate(0); 777 | } 778 | 82% { 779 | transform: translate(4px, 0) rotate(0); 780 | } 781 | 84% { 782 | transform: translate(-5px, 0) rotate(0); 783 | } 784 | 86% { 785 | transform: translate(8px, 0) rotate(0); 786 | } 787 | 88% { 788 | transform: translate(-4px, 0) rotate(0); 789 | } 790 | 90% { 791 | transform: translate(-7px, 0) rotate(0); 792 | } 793 | 92% { 794 | transform: translate(-8px, 0) rotate(0); 795 | } 796 | 94% { 797 | transform: translate(7px, 0) rotate(0); 798 | } 799 | 96% { 800 | transform: translate(-3px, 0) rotate(0); 801 | } 802 | 98% { 803 | transform: translate(-9px, 0) rotate(0); 804 | } 805 | 0%, 100% { 806 | transform: translate(0, 0) rotate(0); 807 | } 808 | } 809 | .shake-horizontal:hover, .shake-trigger:hover .shake-horizontal, .shake-horizontal.shake-freeze, .shake-horizontal.shake-constant { 810 | animation-name: shake-horizontal; 811 | animation-duration: 100ms; 812 | animation-timing-function: ease-in-out; 813 | animation-iteration-count: infinite; 814 | } 815 | @keyframes shake-vertical { 816 | 2% { 817 | transform: translate(0, -3px) rotate(0); 818 | } 819 | 4% { 820 | transform: translate(0, 9px) rotate(0); 821 | } 822 | 6% { 823 | transform: translate(0, 10px) rotate(0); 824 | } 825 | 8% { 826 | transform: translate(0, 5px) rotate(0); 827 | } 828 | 10% { 829 | transform: translate(0, 6px) rotate(0); 830 | } 831 | 12% { 832 | transform: translate(0, 8px) rotate(0); 833 | } 834 | 14% { 835 | transform: translate(0, 10px) rotate(0); 836 | } 837 | 16% { 838 | transform: translate(0, 3px) rotate(0); 839 | } 840 | 18% { 841 | transform: translate(0, 8px) rotate(0); 842 | } 843 | 20% { 844 | transform: translate(0, 4px) rotate(0); 845 | } 846 | 22% { 847 | transform: translate(0, -2px) rotate(0); 848 | } 849 | 24% { 850 | transform: translate(0, 10px) rotate(0); 851 | } 852 | 26% { 853 | transform: translate(0, 4px) rotate(0); 854 | } 855 | 28% { 856 | transform: translate(0, 0px) rotate(0); 857 | } 858 | 30% { 859 | transform: translate(0, 10px) rotate(0); 860 | } 861 | 32% { 862 | transform: translate(0, 7px) rotate(0); 863 | } 864 | 34% { 865 | transform: translate(0, -2px) rotate(0); 866 | } 867 | 36% { 868 | transform: translate(0, 5px) rotate(0); 869 | } 870 | 38% { 871 | transform: translate(0, 10px) rotate(0); 872 | } 873 | 40% { 874 | transform: translate(0, 1px) rotate(0); 875 | } 876 | 42% { 877 | transform: translate(0, 0px) rotate(0); 878 | } 879 | 44% { 880 | transform: translate(0, -6px) rotate(0); 881 | } 882 | 46% { 883 | transform: translate(0, 10px) rotate(0); 884 | } 885 | 48% { 886 | transform: translate(0, 3px) rotate(0); 887 | } 888 | 50% { 889 | transform: translate(0, -1px) rotate(0); 890 | } 891 | 52% { 892 | transform: translate(0, 8px) rotate(0); 893 | } 894 | 54% { 895 | transform: translate(0, 10px) rotate(0); 896 | } 897 | 56% { 898 | transform: translate(0, 0px) rotate(0); 899 | } 900 | 58% { 901 | transform: translate(0, 3px) rotate(0); 902 | } 903 | 60% { 904 | transform: translate(0, 5px) rotate(0); 905 | } 906 | 62% { 907 | transform: translate(0, -2px) rotate(0); 908 | } 909 | 64% { 910 | transform: translate(0, 0px) rotate(0); 911 | } 912 | 66% { 913 | transform: translate(0, 8px) rotate(0); 914 | } 915 | 68% { 916 | transform: translate(0, -6px) rotate(0); 917 | } 918 | 70% { 919 | transform: translate(0, -1px) rotate(0); 920 | } 921 | 72% { 922 | transform: translate(0, 6px) rotate(0); 923 | } 924 | 74% { 925 | transform: translate(0, 7px) rotate(0); 926 | } 927 | 76% { 928 | transform: translate(0, 9px) rotate(0); 929 | } 930 | 78% { 931 | transform: translate(0, -8px) rotate(0); 932 | } 933 | 80% { 934 | transform: translate(0, -3px) rotate(0); 935 | } 936 | 82% { 937 | transform: translate(0, -8px) rotate(0); 938 | } 939 | 84% { 940 | transform: translate(0, -3px) rotate(0); 941 | } 942 | 86% { 943 | transform: translate(0, -4px) rotate(0); 944 | } 945 | 88% { 946 | transform: translate(0, -5px) rotate(0); 947 | } 948 | 90% { 949 | transform: translate(0, -9px) rotate(0); 950 | } 951 | 92% { 952 | transform: translate(0, -4px) rotate(0); 953 | } 954 | 94% { 955 | transform: translate(0, 3px) rotate(0); 956 | } 957 | 96% { 958 | transform: translate(0, 5px) rotate(0); 959 | } 960 | 98% { 961 | transform: translate(0, -9px) rotate(0); 962 | } 963 | 0%, 100% { 964 | transform: translate(0, 0) rotate(0); 965 | } 966 | } 967 | .shake-vertical:hover, .shake-trigger:hover .shake-vertical, .shake-vertical.shake-freeze, .shake-vertical.shake-constant { 968 | animation-name: shake-vertical; 969 | animation-duration: 100ms; 970 | animation-timing-function: ease-in-out; 971 | animation-iteration-count: infinite; 972 | } 973 | @keyframes shake-rotate { 974 | 2% { 975 | transform: translate(0, 0) rotate(6.5deg); 976 | } 977 | 4% { 978 | transform: translate(0, 0) rotate(5.5deg); 979 | } 980 | 6% { 981 | transform: translate(0, 0) rotate(1.5deg); 982 | } 983 | 8% { 984 | transform: translate(0, 0) rotate(-2.5deg); 985 | } 986 | 10% { 987 | transform: translate(0, 0) rotate(3.5deg); 988 | } 989 | 12% { 990 | transform: translate(0, 0) rotate(6.5deg); 991 | } 992 | 14% { 993 | transform: translate(0, 0) rotate(0.5deg); 994 | } 995 | 16% { 996 | transform: translate(0, 0) rotate(0.5deg); 997 | } 998 | 18% { 999 | transform: translate(0, 0) rotate(4.5deg); 1000 | } 1001 | 20% { 1002 | transform: translate(0, 0) rotate(-2.5deg); 1003 | } 1004 | 22% { 1005 | transform: translate(0, 0) rotate(3.5deg); 1006 | } 1007 | 24% { 1008 | transform: translate(0, 0) rotate(7.5deg); 1009 | } 1010 | 26% { 1011 | transform: translate(0, 0) rotate(7.5deg); 1012 | } 1013 | 28% { 1014 | transform: translate(0, 0) rotate(-0.5deg); 1015 | } 1016 | 30% { 1017 | transform: translate(0, 0) rotate(-3.5deg); 1018 | } 1019 | 32% { 1020 | transform: translate(0, 0) rotate(0.5deg); 1021 | } 1022 | 34% { 1023 | transform: translate(0, 0) rotate(-1.5deg); 1024 | } 1025 | 36% { 1026 | transform: translate(0, 0) rotate(-5.5deg); 1027 | } 1028 | 38% { 1029 | transform: translate(0, 0) rotate(5.5deg); 1030 | } 1031 | 40% { 1032 | transform: translate(0, 0) rotate(1.5deg); 1033 | } 1034 | 42% { 1035 | transform: translate(0, 0) rotate(-3.5deg); 1036 | } 1037 | 44% { 1038 | transform: translate(0, 0) rotate(-4.5deg); 1039 | } 1040 | 46% { 1041 | transform: translate(0, 0) rotate(6.5deg); 1042 | } 1043 | 48% { 1044 | transform: translate(0, 0) rotate(2.5deg); 1045 | } 1046 | 50% { 1047 | transform: translate(0, 0) rotate(-4.5deg); 1048 | } 1049 | 52% { 1050 | transform: translate(0, 0) rotate(1.5deg); 1051 | } 1052 | 54% { 1053 | transform: translate(0, 0) rotate(-2.5deg); 1054 | } 1055 | 56% { 1056 | transform: translate(0, 0) rotate(-1.5deg); 1057 | } 1058 | 58% { 1059 | transform: translate(0, 0) rotate(5.5deg); 1060 | } 1061 | 60% { 1062 | transform: translate(0, 0) rotate(0.5deg); 1063 | } 1064 | 62% { 1065 | transform: translate(0, 0) rotate(-1.5deg); 1066 | } 1067 | 64% { 1068 | transform: translate(0, 0) rotate(3.5deg); 1069 | } 1070 | 66% { 1071 | transform: translate(0, 0) rotate(2.5deg); 1072 | } 1073 | 68% { 1074 | transform: translate(0, 0) rotate(1.5deg); 1075 | } 1076 | 70% { 1077 | transform: translate(0, 0) rotate(-0.5deg); 1078 | } 1079 | 72% { 1080 | transform: translate(0, 0) rotate(1.5deg); 1081 | } 1082 | 74% { 1083 | transform: translate(0, 0) rotate(4.5deg); 1084 | } 1085 | 76% { 1086 | transform: translate(0, 0) rotate(-0.5deg); 1087 | } 1088 | 78% { 1089 | transform: translate(0, 0) rotate(0.5deg); 1090 | } 1091 | 80% { 1092 | transform: translate(0, 0) rotate(-5.5deg); 1093 | } 1094 | 82% { 1095 | transform: translate(0, 0) rotate(-3.5deg); 1096 | } 1097 | 84% { 1098 | transform: translate(0, 0) rotate(4.5deg); 1099 | } 1100 | 86% { 1101 | transform: translate(0, 0) rotate(-0.5deg); 1102 | } 1103 | 88% { 1104 | transform: translate(0, 0) rotate(-1.5deg); 1105 | } 1106 | 90% { 1107 | transform: translate(0, 0) rotate(-3.5deg); 1108 | } 1109 | 92% { 1110 | transform: translate(0, 0) rotate(2.5deg); 1111 | } 1112 | 94% { 1113 | transform: translate(0, 0) rotate(-3.5deg); 1114 | } 1115 | 96% { 1116 | transform: translate(0, 0) rotate(5.5deg); 1117 | } 1118 | 98% { 1119 | transform: translate(0, 0) rotate(0.5deg); 1120 | } 1121 | 0%, 100% { 1122 | transform: translate(0, 0) rotate(0); 1123 | } 1124 | } 1125 | .shake-rotate:hover, .shake-trigger:hover .shake-rotate, .shake-rotate.shake-freeze, .shake-rotate.shake-constant { 1126 | animation-name: shake-rotate; 1127 | animation-duration: 100ms; 1128 | animation-timing-function: ease-in-out; 1129 | animation-iteration-count: infinite; 1130 | } 1131 | @keyframes shake-opacity { 1132 | 10% { 1133 | transform: translate(-2px, 1px) rotate(-1.5deg); 1134 | opacity: 0.65; 1135 | } 1136 | 20% { 1137 | transform: translate(-1px, -2px) rotate(-1.5deg); 1138 | opacity: 0.46; 1139 | } 1140 | 30% { 1141 | transform: translate(-2px, 4px) rotate(1.5deg); 1142 | opacity: 0.45; 1143 | } 1144 | 40% { 1145 | transform: translate(-2px, -4px) rotate(0.5deg); 1146 | opacity: 0.43; 1147 | } 1148 | 50% { 1149 | transform: translate(5px, -3px) rotate(-1.5deg); 1150 | opacity: 0.63; 1151 | } 1152 | 60% { 1153 | transform: translate(0px, -4px) rotate(-1.5deg); 1154 | opacity: 0.34; 1155 | } 1156 | 70% { 1157 | transform: translate(5px, -1px) rotate(1.5deg); 1158 | opacity: 0.99; 1159 | } 1160 | 80% { 1161 | transform: translate(-2px, -4px) rotate(0.5deg); 1162 | opacity: 0.55; 1163 | } 1164 | 90% { 1165 | transform: translate(-3px, -4px) rotate(-1.5deg); 1166 | opacity: 0.8; 1167 | } 1168 | 0%, 100% { 1169 | transform: translate(0, 0) rotate(0); 1170 | } 1171 | } 1172 | .shake-opacity:hover, .shake-trigger:hover .shake-opacity, .shake-opacity.shake-freeze, .shake-opacity.shake-constant { 1173 | animation-name: shake-opacity; 1174 | animation-duration: 0.5s; 1175 | animation-timing-function: ease-in-out; 1176 | animation-iteration-count: infinite; 1177 | } 1178 | @keyframes shake-crazy { 1179 | 10% { 1180 | transform: translate(-19px, -8px) rotate(9deg); 1181 | opacity: 0.39; 1182 | } 1183 | 20% { 1184 | transform: translate(-13px, -7px) rotate(-9deg); 1185 | opacity: 0.78; 1186 | } 1187 | 30% { 1188 | transform: translate(-15px, -17px) rotate(-8deg); 1189 | opacity: 0.81; 1190 | } 1191 | 40% { 1192 | transform: translate(11px, 18px) rotate(-3deg); 1193 | opacity: 0.03; 1194 | } 1195 | 50% { 1196 | transform: translate(2px, 10px) rotate(6deg); 1197 | opacity: 0.77; 1198 | } 1199 | 60% { 1200 | transform: translate(9px, 2px) rotate(-5deg); 1201 | opacity: 0.31; 1202 | } 1203 | 70% { 1204 | transform: translate(-15px, -3px) rotate(7deg); 1205 | opacity: 0.47; 1206 | } 1207 | 80% { 1208 | transform: translate(13px, -5px) rotate(5deg); 1209 | opacity: 0.75; 1210 | } 1211 | 90% { 1212 | transform: translate(1px, -19px) rotate(-2deg); 1213 | opacity: 0.27; 1214 | } 1215 | 0%, 100% { 1216 | transform: translate(0, 0) rotate(0); 1217 | } 1218 | } 1219 | .shake-crazy:hover, .shake-trigger:hover .shake-crazy, .shake-crazy.shake-freeze, .shake-crazy.shake-constant { 1220 | animation-name: shake-crazy; 1221 | animation-duration: 100ms; 1222 | animation-timing-function: ease-in-out; 1223 | animation-iteration-count: infinite; 1224 | } 1225 | @keyframes shake-chunk { 1226 | 2% { 1227 | transform: translate(-12px, -2px) rotate(-5deg); 1228 | } 1229 | 4% { 1230 | transform: translate(14px, 10px) rotate(15deg); 1231 | } 1232 | 6% { 1233 | transform: translate(6px, -7px) rotate(14deg); 1234 | } 1235 | 8% { 1236 | transform: translate(1px, 11px) rotate(-3deg); 1237 | } 1238 | 10% { 1239 | transform: translate(-2px, 5px) rotate(-14deg); 1240 | } 1241 | 12% { 1242 | transform: translate(-2px, 9px) rotate(-5deg); 1243 | } 1244 | 14% { 1245 | transform: translate(13px, 12px) rotate(13deg); 1246 | } 1247 | 16% { 1248 | transform: translate(-7px, 14px) rotate(0deg); 1249 | } 1250 | 18% { 1251 | transform: translate(-14px, -13px) rotate(-11deg); 1252 | } 1253 | 20% { 1254 | transform: translate(-6px, 12px) rotate(4deg); 1255 | } 1256 | 22% { 1257 | transform: translate(-9px, 13px) rotate(15deg); 1258 | } 1259 | 24% { 1260 | transform: translate(2px, -13px) rotate(7deg); 1261 | } 1262 | 26% { 1263 | transform: translate(4px, -10px) rotate(-5deg); 1264 | } 1265 | 28% { 1266 | transform: translate(-6px, -6px) rotate(-8deg); 1267 | } 1268 | 30% { 1269 | transform: translate(12px, 13px) rotate(5deg); 1270 | } 1271 | 32% { 1272 | transform: translate(-4px, -13px) rotate(-10deg); 1273 | } 1274 | 34% { 1275 | transform: translate(-5px, 4px) rotate(-7deg); 1276 | } 1277 | 36% { 1278 | transform: translate(3px, -14px) rotate(-6deg); 1279 | } 1280 | 38% { 1281 | transform: translate(-9px, -11px) rotate(8deg); 1282 | } 1283 | 0%, 40%, 100% { 1284 | transform: translate(0, 0) rotate(0); 1285 | } 1286 | } 1287 | .shake-chunk:hover, .shake-trigger:hover .shake-chunk, .shake-chunk.shake-freeze, .shake-chunk.shake-constant { 1288 | animation-name: shake-chunk; 1289 | animation-duration: 4s; 1290 | animation-timing-function: ease-in-out; 1291 | animation-iteration-count: infinite; 1292 | } 1293 | 1294 | /*# sourceMappingURL=csshake.css.map */ 1295 | -------------------------------------------------------------------------------- /dist/csshake.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../scss/csshake.scss","../scss/_tools.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACKA;EACE;EACA;;;AAGF;AAAA;AAAA;EAAY;;;AACZ;AAAA;EAAY;;;AA0CR;EASI;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EAOJ;IACE;;;AAQN;EAKE;EACA,oBAnDI;EAoDJ,2BAhDE;EAiDF,2BAlDE;;AAgBF;EASI;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EAOJ;IACE;;;AAQN;EAKE;EACA,oBAnDI;EAoDJ,2BAhDE;EAiDF,2BAlDE;;AAgBF;EASI;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EAOJ;IACE;;;AAQN;EAKE;EACA,oBDzE2D;EC0E3D,2BAhDE;EAiDF,2BAlDE;;AAgBF;EASI;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EAOJ;IACE;;;AAQN;EAKE;EACA,oBAnDI;EAoDJ,2BAhDE;EAiDF,2BAlDE;;AAgBF;EASI;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EAOJ;IACE;;;AAQN;EAKE;EACA,oBAnDI;EAoDJ,2BAhDE;EAiDF,2BAlDE;;AAgBF;EASI;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EAOJ;IACE;;;AAQN;EAKE;EACA,oBAnDI;EAoDJ,2BAhDE;EAiDF,2BAlDE;;AAgBF;EASI;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EAOJ;IACE;;;AAQN;EAKE;EACA,oBAnDI;EAoDJ,2BAhDE;EAiDF,2BAlDE;;AAgBF;EASI;IACE;IACe;;EAFjB;IACE;IACe;;EAFjB;IACE;IACe;;EAFjB;IACE;IACe;;EAFjB;IACE;IACe;;EAFjB;IACE;IACe;;EAFjB;IACE;IACe;;EAFjB;IACE;IACe;;EAFjB;IACE;IACe;;EAMnB;IACE;;;AAQN;EAKE;EACA,oBDpE8D;ECqE9D,2BAhDE;EAiDF,2BAlDE;;AAgBF;EASI;IACE;IACe;;EAFjB;IACE;IACe;;EAFjB;IACE;IACe;;EAFjB;IACE;IACe;;EAFjB;IACE;IACe;;EAFjB;IACE;IACe;;EAFjB;IACE;IACe;;EAFjB;IACE;IACe;;EAFjB;IACE;IACe;;EAMnB;IACE;;;AAQN;EAKE;EACA,oBDnE6D;ECoE7D,2BAhDE;EAiDF,2BAlDE;;AAgBF;EASI;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EADF;IACE;;EAOJ;IACE;;;AAQN;EAKE;EACA,oBDlE6D;ECmE7D,2BAhDE;EAiDF,2BAlDE","file":"csshake.css"} -------------------------------------------------------------------------------- /dist/csshake.min.css: -------------------------------------------------------------------------------- 1 | /*! * * * * * * * * * * * * * * * * * * * *\ 2 | CSShake :: Package 3 | v1.6.0 4 | CSS classes to move your DOM 5 | (c) 2015 @elrumordelaluz 6 | http://elrumordelaluz.github.io/csshake/ 7 | Licensed under MIT 8 | \* * * * * * * * * * * * * * * * * * * * */.shake-chunk,.shake-crazy,.shake-opacity,.shake-rotate,.shake-vertical,.shake-horizontal,.shake-hard,.shake-slow,.shake-little,.shake{display:inherit;transform-origin:center center}.shake-freeze,.shake-constant.shake-constant--hover:hover,.shake-trigger:hover .shake-constant.shake-constant--hover{animation-play-state:paused}.shake-chunk:hover,.shake-trigger:hover .shake-chunk,.shake-crazy:hover,.shake-trigger:hover .shake-crazy,.shake-opacity:hover,.shake-trigger:hover .shake-opacity,.shake-rotate:hover,.shake-trigger:hover .shake-rotate,.shake-vertical:hover,.shake-trigger:hover .shake-vertical,.shake-horizontal:hover,.shake-trigger:hover .shake-horizontal,.shake-hard:hover,.shake-trigger:hover .shake-hard,.shake-slow:hover,.shake-trigger:hover .shake-slow,.shake-little:hover,.shake-trigger:hover .shake-little,.shake:hover,.shake-trigger:hover .shake,.shake-freeze:hover,.shake-trigger:hover .shake-freeze{animation-play-state:running}@keyframes shake{2%{transform:translate(2.5px, 2.5px) rotate(-0.5deg)}4%{transform:translate(2.5px, 1.5px) rotate(0.5deg)}6%{transform:translate(-1.5px, 0.5px) rotate(-0.5deg)}8%{transform:translate(-0.5px, -1.5px) rotate(-0.5deg)}10%{transform:translate(0.5px, 2.5px) rotate(-0.5deg)}12%{transform:translate(-1.5px, -0.5px) rotate(-0.5deg)}14%{transform:translate(2.5px, -1.5px) rotate(0.5deg)}16%{transform:translate(0.5px, 1.5px) rotate(0.5deg)}18%{transform:translate(1.5px, 0.5px) rotate(0.5deg)}20%{transform:translate(2.5px, -0.5px) rotate(-0.5deg)}22%{transform:translate(1.5px, -0.5px) rotate(0.5deg)}24%{transform:translate(-0.5px, 2.5px) rotate(-0.5deg)}26%{transform:translate(2.5px, 1.5px) rotate(0.5deg)}28%{transform:translate(2.5px, 0.5px) rotate(-0.5deg)}30%{transform:translate(2.5px, -0.5px) rotate(0.5deg)}32%{transform:translate(1.5px, -0.5px) rotate(0.5deg)}34%{transform:translate(1.5px, 2.5px) rotate(0.5deg)}36%{transform:translate(-1.5px, -1.5px) rotate(0.5deg)}38%{transform:translate(-0.5px, 2.5px) rotate(-0.5deg)}40%{transform:translate(-1.5px, 0.5px) rotate(1.5deg)}42%{transform:translate(0.5px, 0.5px) rotate(-0.5deg)}44%{transform:translate(-1.5px, -0.5px) rotate(0.5deg)}46%{transform:translate(1.5px, -1.5px) rotate(0.5deg)}48%{transform:translate(-1.5px, -0.5px) rotate(0.5deg)}50%{transform:translate(-0.5px, 1.5px) rotate(0.5deg)}52%{transform:translate(2.5px, 2.5px) rotate(-0.5deg)}54%{transform:translate(-0.5px, -0.5px) rotate(0.5deg)}56%{transform:translate(1.5px, 1.5px) rotate(-0.5deg)}58%{transform:translate(-1.5px, 0.5px) rotate(0.5deg)}60%{transform:translate(0.5px, 2.5px) rotate(-0.5deg)}62%{transform:translate(-0.5px, 2.5px) rotate(0.5deg)}64%{transform:translate(2.5px, 1.5px) rotate(-0.5deg)}66%{transform:translate(0.5px, -0.5px) rotate(0.5deg)}68%{transform:translate(0.5px, -1.5px) rotate(-0.5deg)}70%{transform:translate(-0.5px, 1.5px) rotate(0.5deg)}72%{transform:translate(1.5px, 2.5px) rotate(1.5deg)}74%{transform:translate(0.5px, 2.5px) rotate(-0.5deg)}76%{transform:translate(-1.5px, -1.5px) rotate(-0.5deg)}78%{transform:translate(2.5px, 1.5px) rotate(0.5deg)}80%{transform:translate(1.5px, 1.5px) rotate(1.5deg)}82%{transform:translate(-0.5px, -0.5px) rotate(-0.5deg)}84%{transform:translate(0.5px, -1.5px) rotate(0.5deg)}86%{transform:translate(-0.5px, 2.5px) rotate(0.5deg)}88%{transform:translate(-0.5px, 1.5px) rotate(0.5deg)}90%{transform:translate(2.5px, 1.5px) rotate(-0.5deg)}92%{transform:translate(2.5px, -1.5px) rotate(1.5deg)}94%{transform:translate(-1.5px, -0.5px) rotate(-0.5deg)}96%{transform:translate(1.5px, 1.5px) rotate(0.5deg)}98%{transform:translate(1.5px, 0.5px) rotate(0.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake:hover,.shake-trigger:hover .shake,.shake.shake-freeze,.shake.shake-constant{animation-name:shake;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake-little{2%{transform:translate(0px, 1px) rotate(0.5deg)}4%{transform:translate(1px, 0px) rotate(0.5deg)}6%{transform:translate(0px, 0px) rotate(0.5deg)}8%{transform:translate(0px, 1px) rotate(0.5deg)}10%{transform:translate(1px, 1px) rotate(0.5deg)}12%{transform:translate(1px, 1px) rotate(0.5deg)}14%{transform:translate(1px, 0px) rotate(0.5deg)}16%{transform:translate(1px, 1px) rotate(0.5deg)}18%{transform:translate(1px, 1px) rotate(0.5deg)}20%{transform:translate(0px, 0px) rotate(0.5deg)}22%{transform:translate(0px, 0px) rotate(0.5deg)}24%{transform:translate(1px, 0px) rotate(0.5deg)}26%{transform:translate(1px, 1px) rotate(0.5deg)}28%{transform:translate(1px, 1px) rotate(0.5deg)}30%{transform:translate(1px, 1px) rotate(0.5deg)}32%{transform:translate(1px, 0px) rotate(0.5deg)}34%{transform:translate(0px, 1px) rotate(0.5deg)}36%{transform:translate(0px, 1px) rotate(0.5deg)}38%{transform:translate(1px, 0px) rotate(0.5deg)}40%{transform:translate(1px, 0px) rotate(0.5deg)}42%{transform:translate(1px, 0px) rotate(0.5deg)}44%{transform:translate(0px, 1px) rotate(0.5deg)}46%{transform:translate(0px, 0px) rotate(0.5deg)}48%{transform:translate(1px, 0px) rotate(0.5deg)}50%{transform:translate(1px, 0px) rotate(0.5deg)}52%{transform:translate(1px, 0px) rotate(0.5deg)}54%{transform:translate(1px, 1px) rotate(0.5deg)}56%{transform:translate(1px, 1px) rotate(0.5deg)}58%{transform:translate(0px, 1px) rotate(0.5deg)}60%{transform:translate(1px, 0px) rotate(0.5deg)}62%{transform:translate(1px, 1px) rotate(0.5deg)}64%{transform:translate(0px, 0px) rotate(0.5deg)}66%{transform:translate(1px, 1px) rotate(0.5deg)}68%{transform:translate(1px, 1px) rotate(0.5deg)}70%{transform:translate(1px, 0px) rotate(0.5deg)}72%{transform:translate(0px, 0px) rotate(0.5deg)}74%{transform:translate(0px, 0px) rotate(0.5deg)}76%{transform:translate(0px, 1px) rotate(0.5deg)}78%{transform:translate(1px, 0px) rotate(0.5deg)}80%{transform:translate(1px, 0px) rotate(0.5deg)}82%{transform:translate(0px, 0px) rotate(0.5deg)}84%{transform:translate(1px, 1px) rotate(0.5deg)}86%{transform:translate(1px, 1px) rotate(0.5deg)}88%{transform:translate(1px, 1px) rotate(0.5deg)}90%{transform:translate(0px, 0px) rotate(0.5deg)}92%{transform:translate(1px, 0px) rotate(0.5deg)}94%{transform:translate(1px, 0px) rotate(0.5deg)}96%{transform:translate(0px, 0px) rotate(0.5deg)}98%{transform:translate(1px, 0px) rotate(0.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-little:hover,.shake-trigger:hover .shake-little,.shake-little.shake-freeze,.shake-little.shake-constant{animation-name:shake-little;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake-slow{2%{transform:translate(-5px, 3px) rotate(1.5deg)}4%{transform:translate(-4px, 1px) rotate(-2.5deg)}6%{transform:translate(9px, 8px) rotate(1.5deg)}8%{transform:translate(9px, -2px) rotate(1.5deg)}10%{transform:translate(3px, 4px) rotate(-2.5deg)}12%{transform:translate(-7px, -7px) rotate(-1.5deg)}14%{transform:translate(0px, -7px) rotate(2.5deg)}16%{transform:translate(-6px, -8px) rotate(3.5deg)}18%{transform:translate(7px, 3px) rotate(0.5deg)}20%{transform:translate(-6px, -2px) rotate(-1.5deg)}22%{transform:translate(9px, -9px) rotate(0.5deg)}24%{transform:translate(-1px, -8px) rotate(-1.5deg)}26%{transform:translate(1px, -6px) rotate(1.5deg)}28%{transform:translate(-2px, -3px) rotate(-1.5deg)}30%{transform:translate(3px, -5px) rotate(0.5deg)}32%{transform:translate(-3px, 7px) rotate(2.5deg)}34%{transform:translate(1px, -7px) rotate(1.5deg)}36%{transform:translate(8px, 4px) rotate(-2.5deg)}38%{transform:translate(-1px, -9px) rotate(-2.5deg)}40%{transform:translate(8px, 6px) rotate(0.5deg)}42%{transform:translate(1px, -1px) rotate(-2.5deg)}44%{transform:translate(1px, 6px) rotate(0.5deg)}46%{transform:translate(2px, 5px) rotate(2.5deg)}48%{transform:translate(-7px, 0px) rotate(-1.5deg)}50%{transform:translate(5px, 10px) rotate(0.5deg)}52%{transform:translate(-2px, 8px) rotate(-1.5deg)}54%{transform:translate(-4px, 10px) rotate(2.5deg)}56%{transform:translate(-6px, -3px) rotate(0.5deg)}58%{transform:translate(-3px, -1px) rotate(0.5deg)}60%{transform:translate(9px, 7px) rotate(1.5deg)}62%{transform:translate(-7px, 7px) rotate(2.5deg)}64%{transform:translate(1px, 10px) rotate(-0.5deg)}66%{transform:translate(-6px, 9px) rotate(-2.5deg)}68%{transform:translate(-2px, 8px) rotate(1.5deg)}70%{transform:translate(-3px, 5px) rotate(2.5deg)}72%{transform:translate(-5px, 0px) rotate(3.5deg)}74%{transform:translate(-9px, -7px) rotate(3.5deg)}76%{transform:translate(-2px, 2px) rotate(-1.5deg)}78%{transform:translate(8px, 1px) rotate(0.5deg)}80%{transform:translate(-6px, -8px) rotate(-2.5deg)}82%{transform:translate(7px, -2px) rotate(1.5deg)}84%{transform:translate(-5px, 3px) rotate(2.5deg)}86%{transform:translate(-7px, -5px) rotate(-1.5deg)}88%{transform:translate(-7px, -9px) rotate(0.5deg)}90%{transform:translate(-8px, -6px) rotate(-2.5deg)}92%{transform:translate(7px, 5px) rotate(2.5deg)}94%{transform:translate(-8px, 10px) rotate(2.5deg)}96%{transform:translate(8px, 4px) rotate(3.5deg)}98%{transform:translate(6px, -8px) rotate(-0.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-slow:hover,.shake-trigger:hover .shake-slow,.shake-slow.shake-freeze,.shake-slow.shake-constant{animation-name:shake-slow;animation-duration:5s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake-hard{2%{transform:translate(2px, -9px) rotate(0.5deg)}4%{transform:translate(-5px, 0px) rotate(-1.5deg)}6%{transform:translate(-6px, 1px) rotate(1.5deg)}8%{transform:translate(4px, 6px) rotate(-0.5deg)}10%{transform:translate(-7px, 3px) rotate(1.5deg)}12%{transform:translate(3px, 10px) rotate(1.5deg)}14%{transform:translate(2px, 6px) rotate(-2.5deg)}16%{transform:translate(-4px, -9px) rotate(-0.5deg)}18%{transform:translate(-6px, -4px) rotate(-1.5deg)}20%{transform:translate(10px, -3px) rotate(3.5deg)}22%{transform:translate(-2px, 5px) rotate(2.5deg)}24%{transform:translate(2px, 10px) rotate(3.5deg)}26%{transform:translate(2px, 8px) rotate(2.5deg)}28%{transform:translate(7px, -4px) rotate(-1.5deg)}30%{transform:translate(8px, 7px) rotate(-1.5deg)}32%{transform:translate(0px, 7px) rotate(1.5deg)}34%{transform:translate(9px, 9px) rotate(-0.5deg)}36%{transform:translate(9px, -3px) rotate(2.5deg)}38%{transform:translate(0px, 7px) rotate(-0.5deg)}40%{transform:translate(2px, 6px) rotate(3.5deg)}42%{transform:translate(-2px, -7px) rotate(-0.5deg)}44%{transform:translate(-2px, 7px) rotate(-1.5deg)}46%{transform:translate(8px, -8px) rotate(-0.5deg)}48%{transform:translate(-8px, -9px) rotate(-0.5deg)}50%{transform:translate(10px, 5px) rotate(3.5deg)}52%{transform:translate(0px, 0px) rotate(-0.5deg)}54%{transform:translate(-1px, -8px) rotate(-2.5deg)}56%{transform:translate(-7px, -4px) rotate(2.5deg)}58%{transform:translate(-7px, -9px) rotate(-2.5deg)}60%{transform:translate(7px, 5px) rotate(-1.5deg)}62%{transform:translate(-8px, 1px) rotate(-1.5deg)}64%{transform:translate(7px, 4px) rotate(2.5deg)}66%{transform:translate(0px, 6px) rotate(-2.5deg)}68%{transform:translate(0px, 9px) rotate(-2.5deg)}70%{transform:translate(9px, 4px) rotate(1.5deg)}72%{transform:translate(-9px, 3px) rotate(-0.5deg)}74%{transform:translate(7px, -4px) rotate(-1.5deg)}76%{transform:translate(-1px, 8px) rotate(0.5deg)}78%{transform:translate(-7px, 9px) rotate(3.5deg)}80%{transform:translate(4px, 9px) rotate(3.5deg)}82%{transform:translate(0px, 6px) rotate(3.5deg)}84%{transform:translate(-5px, -2px) rotate(1.5deg)}86%{transform:translate(-4px, 4px) rotate(0.5deg)}88%{transform:translate(0px, -9px) rotate(1.5deg)}90%{transform:translate(4px, 5px) rotate(-0.5deg)}92%{transform:translate(5px, 0px) rotate(2.5deg)}94%{transform:translate(9px, -8px) rotate(2.5deg)}96%{transform:translate(-5px, 3px) rotate(-2.5deg)}98%{transform:translate(-8px, -8px) rotate(1.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-hard:hover,.shake-trigger:hover .shake-hard,.shake-hard.shake-freeze,.shake-hard.shake-constant{animation-name:shake-hard;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake-horizontal{2%{transform:translate(9px, 0) rotate(0)}4%{transform:translate(2px, 0) rotate(0)}6%{transform:translate(-1px, 0) rotate(0)}8%{transform:translate(6px, 0) rotate(0)}10%{transform:translate(2px, 0) rotate(0)}12%{transform:translate(-2px, 0) rotate(0)}14%{transform:translate(-3px, 0) rotate(0)}16%{transform:translate(3px, 0) rotate(0)}18%{transform:translate(0px, 0) rotate(0)}20%{transform:translate(1px, 0) rotate(0)}22%{transform:translate(-2px, 0) rotate(0)}24%{transform:translate(-4px, 0) rotate(0)}26%{transform:translate(-8px, 0) rotate(0)}28%{transform:translate(9px, 0) rotate(0)}30%{transform:translate(8px, 0) rotate(0)}32%{transform:translate(4px, 0) rotate(0)}34%{transform:translate(6px, 0) rotate(0)}36%{transform:translate(7px, 0) rotate(0)}38%{transform:translate(2px, 0) rotate(0)}40%{transform:translate(-9px, 0) rotate(0)}42%{transform:translate(-7px, 0) rotate(0)}44%{transform:translate(8px, 0) rotate(0)}46%{transform:translate(6px, 0) rotate(0)}48%{transform:translate(8px, 0) rotate(0)}50%{transform:translate(-8px, 0) rotate(0)}52%{transform:translate(-5px, 0) rotate(0)}54%{transform:translate(2px, 0) rotate(0)}56%{transform:translate(9px, 0) rotate(0)}58%{transform:translate(3px, 0) rotate(0)}60%{transform:translate(-6px, 0) rotate(0)}62%{transform:translate(-9px, 0) rotate(0)}64%{transform:translate(2px, 0) rotate(0)}66%{transform:translate(-9px, 0) rotate(0)}68%{transform:translate(0px, 0) rotate(0)}70%{transform:translate(5px, 0) rotate(0)}72%{transform:translate(2px, 0) rotate(0)}74%{transform:translate(-5px, 0) rotate(0)}76%{transform:translate(-4px, 0) rotate(0)}78%{transform:translate(-2px, 0) rotate(0)}80%{transform:translate(-1px, 0) rotate(0)}82%{transform:translate(-3px, 0) rotate(0)}84%{transform:translate(-6px, 0) rotate(0)}86%{transform:translate(4px, 0) rotate(0)}88%{transform:translate(5px, 0) rotate(0)}90%{transform:translate(-5px, 0) rotate(0)}92%{transform:translate(0px, 0) rotate(0)}94%{transform:translate(8px, 0) rotate(0)}96%{transform:translate(-8px, 0) rotate(0)}98%{transform:translate(-6px, 0) rotate(0)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-horizontal:hover,.shake-trigger:hover .shake-horizontal,.shake-horizontal.shake-freeze,.shake-horizontal.shake-constant{animation-name:shake-horizontal;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake-vertical{2%{transform:translate(0, 5px) rotate(0)}4%{transform:translate(0, 10px) rotate(0)}6%{transform:translate(0, -5px) rotate(0)}8%{transform:translate(0, -5px) rotate(0)}10%{transform:translate(0, 0px) rotate(0)}12%{transform:translate(0, -7px) rotate(0)}14%{transform:translate(0, 5px) rotate(0)}16%{transform:translate(0, 3px) rotate(0)}18%{transform:translate(0, -3px) rotate(0)}20%{transform:translate(0, -7px) rotate(0)}22%{transform:translate(0, 10px) rotate(0)}24%{transform:translate(0, 8px) rotate(0)}26%{transform:translate(0, 7px) rotate(0)}28%{transform:translate(0, 3px) rotate(0)}30%{transform:translate(0, -2px) rotate(0)}32%{transform:translate(0, -7px) rotate(0)}34%{transform:translate(0, 3px) rotate(0)}36%{transform:translate(0, -4px) rotate(0)}38%{transform:translate(0, 5px) rotate(0)}40%{transform:translate(0, 7px) rotate(0)}42%{transform:translate(0, 2px) rotate(0)}44%{transform:translate(0, -9px) rotate(0)}46%{transform:translate(0, 2px) rotate(0)}48%{transform:translate(0, 8px) rotate(0)}50%{transform:translate(0, 3px) rotate(0)}52%{transform:translate(0, -7px) rotate(0)}54%{transform:translate(0, 7px) rotate(0)}56%{transform:translate(0, -6px) rotate(0)}58%{transform:translate(0, -1px) rotate(0)}60%{transform:translate(0, 2px) rotate(0)}62%{transform:translate(0, 1px) rotate(0)}64%{transform:translate(0, -2px) rotate(0)}66%{transform:translate(0, 8px) rotate(0)}68%{transform:translate(0, -5px) rotate(0)}70%{transform:translate(0, 8px) rotate(0)}72%{transform:translate(0, 1px) rotate(0)}74%{transform:translate(0, -7px) rotate(0)}76%{transform:translate(0, 3px) rotate(0)}78%{transform:translate(0, -4px) rotate(0)}80%{transform:translate(0, 1px) rotate(0)}82%{transform:translate(0, 9px) rotate(0)}84%{transform:translate(0, -2px) rotate(0)}86%{transform:translate(0, 3px) rotate(0)}88%{transform:translate(0, -7px) rotate(0)}90%{transform:translate(0, -7px) rotate(0)}92%{transform:translate(0, 9px) rotate(0)}94%{transform:translate(0, 7px) rotate(0)}96%{transform:translate(0, -4px) rotate(0)}98%{transform:translate(0, -1px) rotate(0)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-vertical:hover,.shake-trigger:hover .shake-vertical,.shake-vertical.shake-freeze,.shake-vertical.shake-constant{animation-name:shake-vertical;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake-rotate{2%{transform:translate(0, 0) rotate(1.5deg)}4%{transform:translate(0, 0) rotate(4.5deg)}6%{transform:translate(0, 0) rotate(-1.5deg)}8%{transform:translate(0, 0) rotate(1.5deg)}10%{transform:translate(0, 0) rotate(7.5deg)}12%{transform:translate(0, 0) rotate(-6.5deg)}14%{transform:translate(0, 0) rotate(1.5deg)}16%{transform:translate(0, 0) rotate(7.5deg)}18%{transform:translate(0, 0) rotate(1.5deg)}20%{transform:translate(0, 0) rotate(-6.5deg)}22%{transform:translate(0, 0) rotate(-4.5deg)}24%{transform:translate(0, 0) rotate(2.5deg)}26%{transform:translate(0, 0) rotate(5.5deg)}28%{transform:translate(0, 0) rotate(-3.5deg)}30%{transform:translate(0, 0) rotate(-0.5deg)}32%{transform:translate(0, 0) rotate(5.5deg)}34%{transform:translate(0, 0) rotate(-4.5deg)}36%{transform:translate(0, 0) rotate(-6.5deg)}38%{transform:translate(0, 0) rotate(-3.5deg)}40%{transform:translate(0, 0) rotate(-1.5deg)}42%{transform:translate(0, 0) rotate(-1.5deg)}44%{transform:translate(0, 0) rotate(-6.5deg)}46%{transform:translate(0, 0) rotate(-2.5deg)}48%{transform:translate(0, 0) rotate(-5.5deg)}50%{transform:translate(0, 0) rotate(6.5deg)}52%{transform:translate(0, 0) rotate(-3.5deg)}54%{transform:translate(0, 0) rotate(2.5deg)}56%{transform:translate(0, 0) rotate(0.5deg)}58%{transform:translate(0, 0) rotate(3.5deg)}60%{transform:translate(0, 0) rotate(7.5deg)}62%{transform:translate(0, 0) rotate(4.5deg)}64%{transform:translate(0, 0) rotate(2.5deg)}66%{transform:translate(0, 0) rotate(-6.5deg)}68%{transform:translate(0, 0) rotate(5.5deg)}70%{transform:translate(0, 0) rotate(-1.5deg)}72%{transform:translate(0, 0) rotate(3.5deg)}74%{transform:translate(0, 0) rotate(-6.5deg)}76%{transform:translate(0, 0) rotate(-3.5deg)}78%{transform:translate(0, 0) rotate(2.5deg)}80%{transform:translate(0, 0) rotate(2.5deg)}82%{transform:translate(0, 0) rotate(0.5deg)}84%{transform:translate(0, 0) rotate(2.5deg)}86%{transform:translate(0, 0) rotate(-1.5deg)}88%{transform:translate(0, 0) rotate(-5.5deg)}90%{transform:translate(0, 0) rotate(-6.5deg)}92%{transform:translate(0, 0) rotate(-2.5deg)}94%{transform:translate(0, 0) rotate(-1.5deg)}96%{transform:translate(0, 0) rotate(4.5deg)}98%{transform:translate(0, 0) rotate(-1.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-rotate:hover,.shake-trigger:hover .shake-rotate,.shake-rotate.shake-freeze,.shake-rotate.shake-constant{animation-name:shake-rotate;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake-opacity{10%{transform:translate(5px, 0px) rotate(1.5deg);opacity:.09}20%{transform:translate(5px, 4px) rotate(-1.5deg);opacity:.94}30%{transform:translate(4px, -1px) rotate(-0.5deg);opacity:.45}40%{transform:translate(2px, 0px) rotate(2.5deg);opacity:.56}50%{transform:translate(3px, 5px) rotate(-0.5deg);opacity:.76}60%{transform:translate(1px, -2px) rotate(-1.5deg);opacity:.1}70%{transform:translate(3px, 2px) rotate(1.5deg);opacity:.79}80%{transform:translate(3px, -1px) rotate(2.5deg);opacity:.96}90%{transform:translate(0px, 1px) rotate(-1.5deg);opacity:.37}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-opacity:hover,.shake-trigger:hover .shake-opacity,.shake-opacity.shake-freeze,.shake-opacity.shake-constant{animation-name:shake-opacity;animation-duration:.5s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake-crazy{10%{transform:translate(6px, 19px) rotate(-6deg);opacity:.65}20%{transform:translate(-13px, -9px) rotate(0deg);opacity:.12}30%{transform:translate(-14px, 8px) rotate(10deg);opacity:.81}40%{transform:translate(16px, -11px) rotate(-7deg);opacity:.03}50%{transform:translate(16px, 11px) rotate(9deg);opacity:.83}60%{transform:translate(-13px, 9px) rotate(5deg);opacity:.77}70%{transform:translate(11px, 20px) rotate(1deg);opacity:.31}80%{transform:translate(-12px, 0px) rotate(-2deg);opacity:.45}90%{transform:translate(-11px, -10px) rotate(9deg);opacity:.65}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-crazy:hover,.shake-trigger:hover .shake-crazy,.shake-crazy.shake-freeze,.shake-crazy.shake-constant{animation-name:shake-crazy;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake-chunk{2%{transform:translate(-2px, 6px) rotate(1deg)}4%{transform:translate(14px, 13px) rotate(5deg)}6%{transform:translate(12px, -1px) rotate(-6deg)}8%{transform:translate(12px, 2px) rotate(15deg)}10%{transform:translate(-14px, 10px) rotate(-7deg)}12%{transform:translate(-9px, -13px) rotate(-2deg)}14%{transform:translate(0px, -11px) rotate(-12deg)}16%{transform:translate(-14px, 7px) rotate(9deg)}18%{transform:translate(-10px, 8px) rotate(1deg)}20%{transform:translate(-3px, -7px) rotate(2deg)}22%{transform:translate(0px, 6px) rotate(-6deg)}24%{transform:translate(8px, 15px) rotate(-12deg)}26%{transform:translate(-7px, 14px) rotate(-2deg)}28%{transform:translate(8px, -12px) rotate(0deg)}30%{transform:translate(-11px, 6px) rotate(14deg)}32%{transform:translate(-3px, -4px) rotate(-9deg)}34%{transform:translate(-6px, -9px) rotate(-1deg)}36%{transform:translate(2px, -6px) rotate(5deg)}38%{transform:translate(1px, -14px) rotate(11deg)}0%,40%,100%{transform:translate(0, 0) rotate(0)}}.shake-chunk:hover,.shake-trigger:hover .shake-chunk,.shake-chunk.shake-freeze,.shake-chunk.shake-constant{animation-name:shake-chunk;animation-duration:4s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}/*# sourceMappingURL=csshake.css.map */ 9 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CSS Shake :: Download center 5 | 6 | 7 | 8 | 68 | 76 | 77 | 78 |

CSShake

79 |

Download center


csshake Pack (2.83 kB)
csshake minified Pack (2.69 kB)

csshake crazy.css (573 B)csshake crazy.css.map (215 B)csshake crazy.min.css (541 B)csshake default.css (723 B)csshake default.css.map (213 B)csshake default.min.css (695 B)csshake hard.css (811 B)csshake hard.css.map (211 B)csshake hard.min.css (770 B)csshake horizontal.css (674 B)csshake horizontal.css.map (217 B)csshake horizontal.min.css (617 B)csshake little.css (623 B)csshake little.css.map (211 B)csshake little.min.css (599 B)csshake rotate.css (653 B)csshake rotate.css.map (211 B)csshake rotate.min.css (621 B)csshake slow.css (822 B)csshake slow.css.map (214 B)csshake slow.min.css (777 B)csshake vertical.css (663 B)csshake vertical.css.map (213 B)csshake vertical.min.css (619 B)csshake.css.map (300 B) 80 | 83 | 84 | -------------------------------------------------------------------------------- /docs/csshake.css: -------------------------------------------------------------------------------- 1 | /*! * * * * * * * * * * * * * * * * * * * *\ 2 | CSShake :: Package 3 | v1.6.0 4 | CSS classes to move your DOM 5 | (c) 2015 @elrumordelaluz 6 | http://elrumordelaluz.github.io/csshake/ 7 | Licensed under MIT 8 | \* * * * * * * * * * * * * * * * * * * * */.shake-chunk,.shake-crazy,.shake-opacity,.shake-rotate,.shake-vertical,.shake-horizontal,.shake-hard,.shake-slow,.shake-little,.shake{display:inherit;transform-origin:center center}.shake-freeze,.shake-constant.shake-constant--hover:hover,.shake-trigger:hover .shake-constant.shake-constant--hover{animation-play-state:paused}.shake-chunk:hover,.shake-trigger:hover .shake-chunk,.shake-crazy:hover,.shake-trigger:hover .shake-crazy,.shake-opacity:hover,.shake-trigger:hover .shake-opacity,.shake-rotate:hover,.shake-trigger:hover .shake-rotate,.shake-vertical:hover,.shake-trigger:hover .shake-vertical,.shake-horizontal:hover,.shake-trigger:hover .shake-horizontal,.shake-hard:hover,.shake-trigger:hover .shake-hard,.shake-slow:hover,.shake-trigger:hover .shake-slow,.shake-little:hover,.shake-trigger:hover .shake-little,.shake:hover,.shake-trigger:hover .shake,.shake-freeze:hover,.shake-trigger:hover .shake-freeze{animation-play-state:running}@keyframes shake{2%{transform:translate(2.5px, 1.5px) rotate(-0.5deg)}4%{transform:translate(2.5px, 0.5px) rotate(-0.5deg)}6%{transform:translate(2.5px, 0.5px) rotate(0.5deg)}8%{transform:translate(2.5px, 2.5px) rotate(1.5deg)}10%{transform:translate(1.5px, -1.5px) rotate(-0.5deg)}12%{transform:translate(-1.5px, 0.5px) rotate(0.5deg)}14%{transform:translate(0.5px, 1.5px) rotate(-0.5deg)}16%{transform:translate(-1.5px, 0.5px) rotate(0.5deg)}18%{transform:translate(1.5px, -1.5px) rotate(0.5deg)}20%{transform:translate(2.5px, 1.5px) rotate(-0.5deg)}22%{transform:translate(0.5px, -1.5px) rotate(1.5deg)}24%{transform:translate(0.5px, -0.5px) rotate(-0.5deg)}26%{transform:translate(0.5px, -1.5px) rotate(1.5deg)}28%{transform:translate(0.5px, 0.5px) rotate(0.5deg)}30%{transform:translate(2.5px, 0.5px) rotate(0.5deg)}32%{transform:translate(-0.5px, 0.5px) rotate(0.5deg)}34%{transform:translate(2.5px, 0.5px) rotate(-0.5deg)}36%{transform:translate(0.5px, 2.5px) rotate(0.5deg)}38%{transform:translate(-0.5px, 0.5px) rotate(-0.5deg)}40%{transform:translate(-1.5px, 1.5px) rotate(-0.5deg)}42%{transform:translate(1.5px, 2.5px) rotate(-0.5deg)}44%{transform:translate(-0.5px, 0.5px) rotate(-0.5deg)}46%{transform:translate(2.5px, 1.5px) rotate(-0.5deg)}48%{transform:translate(-1.5px, 2.5px) rotate(1.5deg)}50%{transform:translate(-0.5px, -1.5px) rotate(-0.5deg)}52%{transform:translate(-1.5px, 1.5px) rotate(1.5deg)}54%{transform:translate(-1.5px, -1.5px) rotate(-0.5deg)}56%{transform:translate(2.5px, 1.5px) rotate(0.5deg)}58%{transform:translate(-1.5px, -1.5px) rotate(0.5deg)}60%{transform:translate(1.5px, 0.5px) rotate(0.5deg)}62%{transform:translate(-0.5px, -1.5px) rotate(1.5deg)}64%{transform:translate(0.5px, 1.5px) rotate(-0.5deg)}66%{transform:translate(-0.5px, 2.5px) rotate(0.5deg)}68%{transform:translate(2.5px, 2.5px) rotate(1.5deg)}70%{transform:translate(1.5px, -1.5px) rotate(0.5deg)}72%{transform:translate(0.5px, 2.5px) rotate(-0.5deg)}74%{transform:translate(0.5px, -1.5px) rotate(1.5deg)}76%{transform:translate(-0.5px, 0.5px) rotate(0.5deg)}78%{transform:translate(1.5px, -0.5px) rotate(0.5deg)}80%{transform:translate(-0.5px, 2.5px) rotate(-0.5deg)}82%{transform:translate(-1.5px, 0.5px) rotate(1.5deg)}84%{transform:translate(-1.5px, 2.5px) rotate(-0.5deg)}86%{transform:translate(1.5px, -0.5px) rotate(0.5deg)}88%{transform:translate(-1.5px, 0.5px) rotate(0.5deg)}90%{transform:translate(0.5px, 0.5px) rotate(0.5deg)}92%{transform:translate(0.5px, -1.5px) rotate(-0.5deg)}94%{transform:translate(0.5px, 0.5px) rotate(-0.5deg)}96%{transform:translate(2.5px, 2.5px) rotate(1.5deg)}98%{transform:translate(1.5px, 2.5px) rotate(0.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake:hover,.shake-trigger:hover .shake,.shake.shake-freeze,.shake.shake-constant{animation-name:shake;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake-little{2%{transform:translate(0px, 0px) rotate(0.5deg)}4%{transform:translate(0px, 1px) rotate(0.5deg)}6%{transform:translate(0px, 1px) rotate(0.5deg)}8%{transform:translate(0px, 0px) rotate(0.5deg)}10%{transform:translate(1px, 1px) rotate(0.5deg)}12%{transform:translate(1px, 1px) rotate(0.5deg)}14%{transform:translate(1px, 0px) rotate(0.5deg)}16%{transform:translate(1px, 1px) rotate(0.5deg)}18%{transform:translate(1px, 0px) rotate(0.5deg)}20%{transform:translate(1px, 0px) rotate(0.5deg)}22%{transform:translate(0px, 1px) rotate(0.5deg)}24%{transform:translate(1px, 0px) rotate(0.5deg)}26%{transform:translate(1px, 1px) rotate(0.5deg)}28%{transform:translate(0px, 1px) rotate(0.5deg)}30%{transform:translate(0px, 1px) rotate(0.5deg)}32%{transform:translate(0px, 1px) rotate(0.5deg)}34%{transform:translate(1px, 1px) rotate(0.5deg)}36%{transform:translate(0px, 1px) rotate(0.5deg)}38%{transform:translate(0px, 0px) rotate(0.5deg)}40%{transform:translate(0px, 1px) rotate(0.5deg)}42%{transform:translate(0px, 0px) rotate(0.5deg)}44%{transform:translate(0px, 1px) rotate(0.5deg)}46%{transform:translate(1px, 0px) rotate(0.5deg)}48%{transform:translate(1px, 0px) rotate(0.5deg)}50%{transform:translate(0px, 1px) rotate(0.5deg)}52%{transform:translate(0px, 1px) rotate(0.5deg)}54%{transform:translate(0px, 1px) rotate(0.5deg)}56%{transform:translate(1px, 0px) rotate(0.5deg)}58%{transform:translate(1px, 1px) rotate(0.5deg)}60%{transform:translate(1px, 1px) rotate(0.5deg)}62%{transform:translate(0px, 1px) rotate(0.5deg)}64%{transform:translate(1px, 0px) rotate(0.5deg)}66%{transform:translate(0px, 1px) rotate(0.5deg)}68%{transform:translate(0px, 1px) rotate(0.5deg)}70%{transform:translate(1px, 1px) rotate(0.5deg)}72%{transform:translate(0px, 0px) rotate(0.5deg)}74%{transform:translate(0px, 1px) rotate(0.5deg)}76%{transform:translate(0px, 1px) rotate(0.5deg)}78%{transform:translate(0px, 0px) rotate(0.5deg)}80%{transform:translate(0px, 0px) rotate(0.5deg)}82%{transform:translate(1px, 0px) rotate(0.5deg)}84%{transform:translate(1px, 1px) rotate(0.5deg)}86%{transform:translate(1px, 1px) rotate(0.5deg)}88%{transform:translate(1px, 1px) rotate(0.5deg)}90%{transform:translate(1px, 0px) rotate(0.5deg)}92%{transform:translate(1px, 0px) rotate(0.5deg)}94%{transform:translate(0px, 1px) rotate(0.5deg)}96%{transform:translate(1px, 0px) rotate(0.5deg)}98%{transform:translate(1px, 1px) rotate(0.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-little:hover,.shake-trigger:hover .shake-little,.shake-little.shake-freeze,.shake-little.shake-constant{animation-name:shake-little;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake-slow{2%{transform:translate(-2px, 9px) rotate(-1.5deg)}4%{transform:translate(-7px, 10px) rotate(2.5deg)}6%{transform:translate(-5px, -9px) rotate(0.5deg)}8%{transform:translate(-4px, 6px) rotate(-1.5deg)}10%{transform:translate(8px, 9px) rotate(1.5deg)}12%{transform:translate(10px, 5px) rotate(-1.5deg)}14%{transform:translate(-1px, 5px) rotate(-0.5deg)}16%{transform:translate(2px, -2px) rotate(-0.5deg)}18%{transform:translate(1px, 10px) rotate(0.5deg)}20%{transform:translate(9px, 5px) rotate(-1.5deg)}22%{transform:translate(8px, -6px) rotate(2.5deg)}24%{transform:translate(-5px, -5px) rotate(3.5deg)}26%{transform:translate(-3px, -8px) rotate(2.5deg)}28%{transform:translate(5px, 0px) rotate(-0.5deg)}30%{transform:translate(5px, -8px) rotate(3.5deg)}32%{transform:translate(3px, -4px) rotate(0.5deg)}34%{transform:translate(5px, 0px) rotate(1.5deg)}36%{transform:translate(8px, -3px) rotate(2.5deg)}38%{transform:translate(5px, 5px) rotate(2.5deg)}40%{transform:translate(9px, 2px) rotate(-0.5deg)}42%{transform:translate(6px, -7px) rotate(2.5deg)}44%{transform:translate(10px, -8px) rotate(3.5deg)}46%{transform:translate(6px, -1px) rotate(1.5deg)}48%{transform:translate(2px, 7px) rotate(-1.5deg)}50%{transform:translate(5px, 6px) rotate(1.5deg)}52%{transform:translate(8px, 10px) rotate(-1.5deg)}54%{transform:translate(-8px, 6px) rotate(-0.5deg)}56%{transform:translate(3px, 7px) rotate(-0.5deg)}58%{transform:translate(9px, 4px) rotate(2.5deg)}60%{transform:translate(3px, -7px) rotate(-0.5deg)}62%{transform:translate(-5px, 1px) rotate(3.5deg)}64%{transform:translate(9px, 0px) rotate(2.5deg)}66%{transform:translate(-1px, -4px) rotate(1.5deg)}68%{transform:translate(7px, -1px) rotate(-2.5deg)}70%{transform:translate(-5px, 5px) rotate(1.5deg)}72%{transform:translate(8px, 5px) rotate(2.5deg)}74%{transform:translate(-9px, 8px) rotate(-0.5deg)}76%{transform:translate(-8px, -6px) rotate(-0.5deg)}78%{transform:translate(-8px, 9px) rotate(-0.5deg)}80%{transform:translate(-8px, -2px) rotate(2.5deg)}82%{transform:translate(-8px, -1px) rotate(-1.5deg)}84%{transform:translate(-2px, 4px) rotate(0.5deg)}86%{transform:translate(-5px, 4px) rotate(-0.5deg)}88%{transform:translate(1px, 5px) rotate(-2.5deg)}90%{transform:translate(7px, 6px) rotate(3.5deg)}92%{transform:translate(-4px, 7px) rotate(-2.5deg)}94%{transform:translate(-6px, 10px) rotate(1.5deg)}96%{transform:translate(-1px, 1px) rotate(-1.5deg)}98%{transform:translate(-5px, 0px) rotate(1.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-slow:hover,.shake-trigger:hover .shake-slow,.shake-slow.shake-freeze,.shake-slow.shake-constant{animation-name:shake-slow;animation-duration:5s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake-hard{2%{transform:translate(3px, -8px) rotate(-0.5deg)}4%{transform:translate(-9px, 5px) rotate(-0.5deg)}6%{transform:translate(-6px, 9px) rotate(2.5deg)}8%{transform:translate(-8px, 9px) rotate(0.5deg)}10%{transform:translate(-6px, -1px) rotate(0.5deg)}12%{transform:translate(-9px, 2px) rotate(2.5deg)}14%{transform:translate(-2px, 9px) rotate(-1.5deg)}16%{transform:translate(0px, 10px) rotate(-0.5deg)}18%{transform:translate(-3px, -3px) rotate(3.5deg)}20%{transform:translate(8px, -1px) rotate(3.5deg)}22%{transform:translate(10px, -4px) rotate(-0.5deg)}24%{transform:translate(0px, -8px) rotate(0.5deg)}26%{transform:translate(-1px, 2px) rotate(-1.5deg)}28%{transform:translate(8px, 8px) rotate(-1.5deg)}30%{transform:translate(-9px, 5px) rotate(-0.5deg)}32%{transform:translate(1px, 10px) rotate(1.5deg)}34%{transform:translate(7px, -4px) rotate(3.5deg)}36%{transform:translate(2px, -8px) rotate(-1.5deg)}38%{transform:translate(6px, 10px) rotate(-2.5deg)}40%{transform:translate(3px, -1px) rotate(0.5deg)}42%{transform:translate(-5px, -4px) rotate(-0.5deg)}44%{transform:translate(-3px, 10px) rotate(-2.5deg)}46%{transform:translate(-7px, 2px) rotate(-2.5deg)}48%{transform:translate(-5px, -1px) rotate(3.5deg)}50%{transform:translate(-7px, -1px) rotate(1.5deg)}52%{transform:translate(2px, 8px) rotate(-1.5deg)}54%{transform:translate(7px, -9px) rotate(0.5deg)}56%{transform:translate(-4px, 1px) rotate(1.5deg)}58%{transform:translate(-2px, -8px) rotate(1.5deg)}60%{transform:translate(-7px, 1px) rotate(-0.5deg)}62%{transform:translate(-5px, -2px) rotate(-0.5deg)}64%{transform:translate(-2px, 5px) rotate(-2.5deg)}66%{transform:translate(-2px, 7px) rotate(3.5deg)}68%{transform:translate(-7px, -1px) rotate(-0.5deg)}70%{transform:translate(-5px, 8px) rotate(-2.5deg)}72%{transform:translate(-3px, -9px) rotate(-2.5deg)}74%{transform:translate(-2px, -7px) rotate(3.5deg)}76%{transform:translate(-5px, -4px) rotate(2.5deg)}78%{transform:translate(-2px, 10px) rotate(-1.5deg)}80%{transform:translate(4px, 9px) rotate(3.5deg)}82%{transform:translate(3px, -1px) rotate(-1.5deg)}84%{transform:translate(4px, -6px) rotate(0.5deg)}86%{transform:translate(-1px, 4px) rotate(-0.5deg)}88%{transform:translate(10px, -5px) rotate(3.5deg)}90%{transform:translate(-3px, 7px) rotate(-0.5deg)}92%{transform:translate(5px, -2px) rotate(2.5deg)}94%{transform:translate(-2px, -7px) rotate(-0.5deg)}96%{transform:translate(0px, 10px) rotate(-2.5deg)}98%{transform:translate(-4px, 3px) rotate(2.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-hard:hover,.shake-trigger:hover .shake-hard,.shake-hard.shake-freeze,.shake-hard.shake-constant{animation-name:shake-hard;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake-horizontal{2%{transform:translate(8px, 0) rotate(0)}4%{transform:translate(7px, 0) rotate(0)}6%{transform:translate(-3px, 0) rotate(0)}8%{transform:translate(-1px, 0) rotate(0)}10%{transform:translate(2px, 0) rotate(0)}12%{transform:translate(8px, 0) rotate(0)}14%{transform:translate(4px, 0) rotate(0)}16%{transform:translate(-8px, 0) rotate(0)}18%{transform:translate(-2px, 0) rotate(0)}20%{transform:translate(0px, 0) rotate(0)}22%{transform:translate(-9px, 0) rotate(0)}24%{transform:translate(-9px, 0) rotate(0)}26%{transform:translate(10px, 0) rotate(0)}28%{transform:translate(7px, 0) rotate(0)}30%{transform:translate(9px, 0) rotate(0)}32%{transform:translate(2px, 0) rotate(0)}34%{transform:translate(5px, 0) rotate(0)}36%{transform:translate(-2px, 0) rotate(0)}38%{transform:translate(5px, 0) rotate(0)}40%{transform:translate(-4px, 0) rotate(0)}42%{transform:translate(8px, 0) rotate(0)}44%{transform:translate(0px, 0) rotate(0)}46%{transform:translate(3px, 0) rotate(0)}48%{transform:translate(0px, 0) rotate(0)}50%{transform:translate(-2px, 0) rotate(0)}52%{transform:translate(-6px, 0) rotate(0)}54%{transform:translate(-6px, 0) rotate(0)}56%{transform:translate(3px, 0) rotate(0)}58%{transform:translate(-5px, 0) rotate(0)}60%{transform:translate(-8px, 0) rotate(0)}62%{transform:translate(-7px, 0) rotate(0)}64%{transform:translate(-1px, 0) rotate(0)}66%{transform:translate(-6px, 0) rotate(0)}68%{transform:translate(10px, 0) rotate(0)}70%{transform:translate(-6px, 0) rotate(0)}72%{transform:translate(8px, 0) rotate(0)}74%{transform:translate(2px, 0) rotate(0)}76%{transform:translate(8px, 0) rotate(0)}78%{transform:translate(-4px, 0) rotate(0)}80%{transform:translate(-6px, 0) rotate(0)}82%{transform:translate(0px, 0) rotate(0)}84%{transform:translate(10px, 0) rotate(0)}86%{transform:translate(0px, 0) rotate(0)}88%{transform:translate(-6px, 0) rotate(0)}90%{transform:translate(4px, 0) rotate(0)}92%{transform:translate(-6px, 0) rotate(0)}94%{transform:translate(-1px, 0) rotate(0)}96%{transform:translate(8px, 0) rotate(0)}98%{transform:translate(-8px, 0) rotate(0)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-horizontal:hover,.shake-trigger:hover .shake-horizontal,.shake-horizontal.shake-freeze,.shake-horizontal.shake-constant{animation-name:shake-horizontal;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake-vertical{2%{transform:translate(0, 9px) rotate(0)}4%{transform:translate(0, 6px) rotate(0)}6%{transform:translate(0, 1px) rotate(0)}8%{transform:translate(0, -7px) rotate(0)}10%{transform:translate(0, 7px) rotate(0)}12%{transform:translate(0, 0px) rotate(0)}14%{transform:translate(0, 1px) rotate(0)}16%{transform:translate(0, 7px) rotate(0)}18%{transform:translate(0, -3px) rotate(0)}20%{transform:translate(0, -4px) rotate(0)}22%{transform:translate(0, -8px) rotate(0)}24%{transform:translate(0, 0px) rotate(0)}26%{transform:translate(0, -6px) rotate(0)}28%{transform:translate(0, 5px) rotate(0)}30%{transform:translate(0, 0px) rotate(0)}32%{transform:translate(0, -1px) rotate(0)}34%{transform:translate(0, 4px) rotate(0)}36%{transform:translate(0, 7px) rotate(0)}38%{transform:translate(0, -8px) rotate(0)}40%{transform:translate(0, -8px) rotate(0)}42%{transform:translate(0, 9px) rotate(0)}44%{transform:translate(0, 10px) rotate(0)}46%{transform:translate(0, 5px) rotate(0)}48%{transform:translate(0, 8px) rotate(0)}50%{transform:translate(0, -3px) rotate(0)}52%{transform:translate(0, 5px) rotate(0)}54%{transform:translate(0, 0px) rotate(0)}56%{transform:translate(0, -1px) rotate(0)}58%{transform:translate(0, -3px) rotate(0)}60%{transform:translate(0, 7px) rotate(0)}62%{transform:translate(0, 2px) rotate(0)}64%{transform:translate(0, -8px) rotate(0)}66%{transform:translate(0, 3px) rotate(0)}68%{transform:translate(0, -9px) rotate(0)}70%{transform:translate(0, 10px) rotate(0)}72%{transform:translate(0, 2px) rotate(0)}74%{transform:translate(0, 3px) rotate(0)}76%{transform:translate(0, -8px) rotate(0)}78%{transform:translate(0, 6px) rotate(0)}80%{transform:translate(0, 6px) rotate(0)}82%{transform:translate(0, 4px) rotate(0)}84%{transform:translate(0, -4px) rotate(0)}86%{transform:translate(0, -3px) rotate(0)}88%{transform:translate(0, -3px) rotate(0)}90%{transform:translate(0, 0px) rotate(0)}92%{transform:translate(0, 7px) rotate(0)}94%{transform:translate(0, 10px) rotate(0)}96%{transform:translate(0, 7px) rotate(0)}98%{transform:translate(0, 9px) rotate(0)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-vertical:hover,.shake-trigger:hover .shake-vertical,.shake-vertical.shake-freeze,.shake-vertical.shake-constant{animation-name:shake-vertical;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake-rotate{2%{transform:translate(0, 0) rotate(-6.5deg)}4%{transform:translate(0, 0) rotate(3.5deg)}6%{transform:translate(0, 0) rotate(4.5deg)}8%{transform:translate(0, 0) rotate(-1.5deg)}10%{transform:translate(0, 0) rotate(-4.5deg)}12%{transform:translate(0, 0) rotate(-0.5deg)}14%{transform:translate(0, 0) rotate(-5.5deg)}16%{transform:translate(0, 0) rotate(-2.5deg)}18%{transform:translate(0, 0) rotate(7.5deg)}20%{transform:translate(0, 0) rotate(-4.5deg)}22%{transform:translate(0, 0) rotate(2.5deg)}24%{transform:translate(0, 0) rotate(2.5deg)}26%{transform:translate(0, 0) rotate(2.5deg)}28%{transform:translate(0, 0) rotate(-4.5deg)}30%{transform:translate(0, 0) rotate(4.5deg)}32%{transform:translate(0, 0) rotate(2.5deg)}34%{transform:translate(0, 0) rotate(4.5deg)}36%{transform:translate(0, 0) rotate(1.5deg)}38%{transform:translate(0, 0) rotate(-2.5deg)}40%{transform:translate(0, 0) rotate(0.5deg)}42%{transform:translate(0, 0) rotate(2.5deg)}44%{transform:translate(0, 0) rotate(-5.5deg)}46%{transform:translate(0, 0) rotate(5.5deg)}48%{transform:translate(0, 0) rotate(7.5deg)}50%{transform:translate(0, 0) rotate(0.5deg)}52%{transform:translate(0, 0) rotate(-0.5deg)}54%{transform:translate(0, 0) rotate(-2.5deg)}56%{transform:translate(0, 0) rotate(5.5deg)}58%{transform:translate(0, 0) rotate(-5.5deg)}60%{transform:translate(0, 0) rotate(-3.5deg)}62%{transform:translate(0, 0) rotate(5.5deg)}64%{transform:translate(0, 0) rotate(-3.5deg)}66%{transform:translate(0, 0) rotate(5.5deg)}68%{transform:translate(0, 0) rotate(7.5deg)}70%{transform:translate(0, 0) rotate(-2.5deg)}72%{transform:translate(0, 0) rotate(0.5deg)}74%{transform:translate(0, 0) rotate(-1.5deg)}76%{transform:translate(0, 0) rotate(2.5deg)}78%{transform:translate(0, 0) rotate(6.5deg)}80%{transform:translate(0, 0) rotate(4.5deg)}82%{transform:translate(0, 0) rotate(-3.5deg)}84%{transform:translate(0, 0) rotate(3.5deg)}86%{transform:translate(0, 0) rotate(-2.5deg)}88%{transform:translate(0, 0) rotate(-5.5deg)}90%{transform:translate(0, 0) rotate(4.5deg)}92%{transform:translate(0, 0) rotate(-3.5deg)}94%{transform:translate(0, 0) rotate(7.5deg)}96%{transform:translate(0, 0) rotate(-2.5deg)}98%{transform:translate(0, 0) rotate(-6.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-rotate:hover,.shake-trigger:hover .shake-rotate,.shake-rotate.shake-freeze,.shake-rotate.shake-constant{animation-name:shake-rotate;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake-opacity{10%{transform:translate(-4px, 2px) rotate(-0.5deg);opacity:.32}20%{transform:translate(3px, -4px) rotate(-1.5deg);opacity:.85}30%{transform:translate(-2px, 0px) rotate(-1.5deg);opacity:.83}40%{transform:translate(3px, -4px) rotate(1.5deg);opacity:.97}50%{transform:translate(4px, -2px) rotate(2.5deg);opacity:.18}60%{transform:translate(-2px, 5px) rotate(0.5deg);opacity:.82}70%{transform:translate(-3px, -3px) rotate(-1.5deg);opacity:.09}80%{transform:translate(-1px, -4px) rotate(0.5deg);opacity:.6}90%{transform:translate(5px, 2px) rotate(1.5deg);opacity:.41}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-opacity:hover,.shake-trigger:hover .shake-opacity,.shake-opacity.shake-freeze,.shake-opacity.shake-constant{animation-name:shake-opacity;animation-duration:.5s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake-crazy{10%{transform:translate(4px, 16px) rotate(-8deg);opacity:.8}20%{transform:translate(-6px, 20px) rotate(3deg);opacity:.65}30%{transform:translate(-13px, 7px) rotate(-2deg);opacity:.73}40%{transform:translate(17px, -7px) rotate(-5deg);opacity:.9}50%{transform:translate(-13px, 8px) rotate(1deg);opacity:.71}60%{transform:translate(-11px, 10px) rotate(10deg);opacity:.38}70%{transform:translate(-18px, -9px) rotate(1deg);opacity:.61}80%{transform:translate(-1px, 5px) rotate(6deg);opacity:.81}90%{transform:translate(3px, 15px) rotate(-3deg);opacity:.11}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-crazy:hover,.shake-trigger:hover .shake-crazy,.shake-crazy.shake-freeze,.shake-crazy.shake-constant{animation-name:shake-crazy;animation-duration:100ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake-chunk{2%{transform:translate(-7px, 11px) rotate(12deg)}4%{transform:translate(10px, -9px) rotate(15deg)}6%{transform:translate(-2px, 10px) rotate(-14deg)}8%{transform:translate(-10px, 2px) rotate(-7deg)}10%{transform:translate(-7px, 12px) rotate(-1deg)}12%{transform:translate(1px, 4px) rotate(0deg)}14%{transform:translate(15px, 0px) rotate(11deg)}16%{transform:translate(7px, 8px) rotate(9deg)}18%{transform:translate(5px, 13px) rotate(-13deg)}20%{transform:translate(-8px, 3px) rotate(-4deg)}22%{transform:translate(11px, 3px) rotate(-12deg)}24%{transform:translate(3px, -4px) rotate(-3deg)}26%{transform:translate(-1px, -9px) rotate(-7deg)}28%{transform:translate(1px, 2px) rotate(15deg)}30%{transform:translate(4px, -11px) rotate(1deg)}32%{transform:translate(8px, -10px) rotate(-9deg)}34%{transform:translate(-5px, 2px) rotate(-8deg)}36%{transform:translate(12px, 11px) rotate(8deg)}38%{transform:translate(-11px, -4px) rotate(-4deg)}0%,40%,100%{transform:translate(0, 0) rotate(0)}}.shake-chunk:hover,.shake-trigger:hover .shake-chunk,.shake-chunk.shake-freeze,.shake-chunk.shake-constant{animation-name:shake-chunk;animation-duration:4s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}/*# sourceMappingURL=csshake.css.map */ 9 | -------------------------------------------------------------------------------- /docs/csshake.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../scss/csshake.scss","../scss/_tools.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2CCKA,sIACE,gBACA,+BAGF,iJACA,8mBA0CI,iBASI,GACE,kDADF,GACE,kDADF,GACE,iDADF,GACE,iDADF,IACE,mDADF,IACE,kDADF,IACE,kDADF,IACE,kDADF,IACE,kDADF,IACE,kDADF,IACE,kDADF,IACE,mDADF,IACE,kDADF,IACE,iDADF,IACE,iDADF,IACE,kDADF,IACE,kDADF,IACE,iDADF,IACE,mDADF,IACE,mDADF,IACE,kDADF,IACE,mDADF,IACE,kDADF,IACE,kDADF,IACE,oDADF,IACE,kDADF,IACE,oDADF,IACE,iDADF,IACE,mDADF,IACE,iDADF,IACE,mDADF,IACE,kDADF,IACE,kDADF,IACE,iDADF,IACE,kDADF,IACE,kDADF,IACE,kDADF,IACE,kDADF,IACE,kDADF,IACE,mDADF,IACE,kDADF,IACE,mDADF,IACE,kDADF,IACE,kDADF,IACE,iDADF,IACE,mDADF,IACE,kDADF,IACE,iDADF,IACE,iDAOJ,QACE,qCAQN,mFAKE,qBACA,mBAnDI,MAoDJ,0BAhDE,YAiDF,0BAlDE,SAgBF,wBASI,GACE,6CADF,GACE,6CADF,GACE,6CADF,GACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CADF,IACE,6CAOJ,QACE,qCAQN,+GAKE,4BACA,mBAnDI,MAoDJ,0BAhDE,YAiDF,0BAlDE,SAgBF,sBASI,GACE,+CADF,GACE,+CADF,GACE,+CADF,GACE,+CADF,IACE,6CADF,IACE,+CADF,IACE,+CADF,IACE,+CADF,IACE,8CADF,IACE,8CADF,IACE,8CADF,IACE,+CADF,IACE,+CADF,IACE,8CADF,IACE,8CADF,IACE,8CADF,IACE,6CADF,IACE,8CADF,IACE,6CADF,IACE,8CADF,IACE,8CADF,IACE,+CADF,IACE,8CADF,IACE,8CADF,IACE,6CADF,IACE,+CADF,IACE,+CADF,IACE,8CADF,IACE,6CADF,IACE,+CADF,IACE,8CADF,IACE,6CADF,IACE,+CADF,IACE,+CADF,IACE,8CADF,IACE,6CADF,IACE,+CADF,IACE,gDADF,IACE,+CADF,IACE,+CADF,IACE,gDADF,IACE,8CADF,IACE,+CADF,IACE,8CADF,IACE,6CADF,IACE,+CADF,IACE,+CADF,IACE,+CADF,IACE,8CAOJ,QACE,qCAQN,uGAKE,0BACA,mBDzE2D,GC0E3D,0BAhDE,YAiDF,0BAlDE,SAgBF,sBASI,GACE,+CADF,GACE,+CADF,GACE,8CADF,GACE,8CADF,IACE,+CADF,IACE,8CADF,IACE,+CADF,IACE,+CADF,IACE,+CADF,IACE,8CADF,IACE,gDADF,IACE,8CADF,IACE,+CADF,IACE,8CADF,IACE,+CADF,IACE,8CADF,IACE,8CADF,IACE,+CADF,IACE,+CADF,IACE,8CADF,IACE,gDADF,IACE,gDADF,IACE,+CADF,IACE,+CADF,IACE,+CADF,IACE,8CADF,IACE,8CADF,IACE,8CADF,IACE,+CADF,IACE,+CADF,IACE,gDADF,IACE,+CADF,IACE,8CADF,IACE,gDADF,IACE,+CADF,IACE,gDADF,IACE,+CADF,IACE,+CADF,IACE,gDADF,IACE,6CADF,IACE,+CADF,IACE,8CADF,IACE,+CADF,IACE,+CADF,IACE,+CADF,IACE,8CADF,IACE,gDADF,IACE,+CADF,IACE,8CAOJ,QACE,qCAQN,uGAKE,0BACA,mBAnDI,MAoDJ,0BAhDE,YAiDF,0BAlDE,SAgBF,4BASI,GACE,sCADF,GACE,sCADF,GACE,uCADF,GACE,uCADF,IACE,sCADF,IACE,sCADF,IACE,sCADF,IACE,uCADF,IACE,uCADF,IACE,sCADF,IACE,uCADF,IACE,uCADF,IACE,uCADF,IACE,sCADF,IACE,sCADF,IACE,sCADF,IACE,sCADF,IACE,uCADF,IACE,sCADF,IACE,uCADF,IACE,sCADF,IACE,sCADF,IACE,sCADF,IACE,sCADF,IACE,uCADF,IACE,uCADF,IACE,uCADF,IACE,sCADF,IACE,uCADF,IACE,uCADF,IACE,uCADF,IACE,uCADF,IACE,uCADF,IACE,uCADF,IACE,uCADF,IACE,sCADF,IACE,sCADF,IACE,sCADF,IACE,uCADF,IACE,uCADF,IACE,sCADF,IACE,uCADF,IACE,sCADF,IACE,uCADF,IACE,sCADF,IACE,uCADF,IACE,uCADF,IACE,sCADF,IACE,uCAOJ,QACE,qCAQN,+HAKE,gCACA,mBAnDI,MAoDJ,0BAhDE,YAiDF,0BAlDE,SAgBF,0BASI,GACE,sCADF,GACE,sCADF,GACE,sCADF,GACE,uCADF,IACE,sCADF,IACE,sCADF,IACE,sCADF,IACE,sCADF,IACE,uCADF,IACE,uCADF,IACE,uCADF,IACE,sCADF,IACE,uCADF,IACE,sCADF,IACE,sCADF,IACE,uCADF,IACE,sCADF,IACE,sCADF,IACE,uCADF,IACE,uCADF,IACE,sCADF,IACE,uCADF,IACE,sCADF,IACE,sCADF,IACE,uCADF,IACE,sCADF,IACE,sCADF,IACE,uCADF,IACE,uCADF,IACE,sCADF,IACE,sCADF,IACE,uCADF,IACE,sCADF,IACE,uCADF,IACE,uCADF,IACE,sCADF,IACE,sCADF,IACE,uCADF,IACE,sCADF,IACE,sCADF,IACE,sCADF,IACE,uCADF,IACE,uCADF,IACE,uCADF,IACE,sCADF,IACE,sCADF,IACE,uCADF,IACE,sCADF,IACE,sCAOJ,QACE,qCAQN,uHAKE,8BACA,mBAnDI,MAoDJ,0BAhDE,YAiDF,0BAlDE,SAgBF,wBASI,GACE,0CADF,GACE,yCADF,GACE,yCADF,GACE,0CADF,IACE,0CADF,IACE,0CADF,IACE,0CADF,IACE,0CADF,IACE,yCADF,IACE,0CADF,IACE,yCADF,IACE,yCADF,IACE,yCADF,IACE,0CADF,IACE,yCADF,IACE,yCADF,IACE,yCADF,IACE,yCADF,IACE,0CADF,IACE,yCADF,IACE,yCADF,IACE,0CADF,IACE,yCADF,IACE,yCADF,IACE,yCADF,IACE,0CADF,IACE,0CADF,IACE,yCADF,IACE,0CADF,IACE,0CADF,IACE,yCADF,IACE,0CADF,IACE,yCADF,IACE,yCADF,IACE,0CADF,IACE,yCADF,IACE,0CADF,IACE,yCADF,IACE,yCADF,IACE,yCADF,IACE,0CADF,IACE,yCADF,IACE,0CADF,IACE,0CADF,IACE,yCADF,IACE,0CADF,IACE,yCADF,IACE,0CADF,IACE,0CAOJ,QACE,qCAQN,+GAKE,4BACA,mBAnDI,MAoDJ,0BAhDE,YAiDF,0BAlDE,SAgBF,yBASI,IACE,+CACe,YAFjB,IACE,+CACe,YAFjB,IACE,+CACe,YAFjB,IACE,8CACe,YAFjB,IACE,8CACe,YAFjB,IACE,8CACe,YAFjB,IACE,gDACe,YAFjB,IACE,+CACe,WAFjB,IACE,6CACe,YAMnB,QACE,qCAQN,mHAKE,6BACA,mBDpE8D,ICqE9D,0BAhDE,YAiDF,0BAlDE,SAgBF,uBASI,IACE,6CACe,WAFjB,IACE,6CACe,YAFjB,IACE,8CACe,YAFjB,IACE,8CACe,WAFjB,IACE,6CACe,YAFjB,IACE,+CACe,YAFjB,IACE,8CACe,YAFjB,IACE,4CACe,YAFjB,IACE,6CACe,YAMnB,QACE,qCAQN,2GAKE,2BACA,mBDnE6D,MCoE7D,0BAhDE,YAiDF,0BAlDE,SAgBF,uBASI,GACE,8CADF,GACE,8CADF,GACE,+CADF,GACE,8CADF,IACE,8CADF,IACE,2CADF,IACE,6CADF,IACE,2CADF,IACE,8CADF,IACE,6CADF,IACE,8CADF,IACE,6CADF,IACE,8CADF,IACE,4CADF,IACE,6CADF,IACE,8CADF,IACE,6CADF,IACE,6CADF,IACE,+CAOJ,YACE,qCAQN,2GAKE,2BACA,mBDlE6D,GCmE7D,0BAhDE,YAiDF,0BAlDE","file":"csshake.css"} -------------------------------------------------------------------------------- /docs/demo.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 3 | margin: 0; 4 | padding: 0; 5 | border: 0; 6 | font: inherit; 7 | font-size: 100%; 8 | vertical-align: baseline; } 9 | 10 | html { 11 | line-height: 1; } 12 | 13 | *, *:before, *:after { 14 | -moz-box-sizing: border-box; 15 | -webkit-box-sizing: border-box; 16 | box-sizing: border-box; } 17 | 18 | body { 19 | background: #2ab8ac; 20 | overflow-x: hidden; } 21 | 22 | 23 | .new-banner { 24 | position: absolute; 25 | left: 30px; 26 | top: 20px; 27 | z-index: 10; 28 | width: 250px; 29 | font-family: 'Dancing Script', cursive; 30 | font-size: 1em; 31 | } 32 | 33 | .new-banner:before { 34 | content: 'new!'; 35 | position: absolute; 36 | left: -13px; 37 | top: -7px; 38 | background-color: #e96144; 39 | padding: .2em .5em; 40 | color: white; 41 | border-radius: 4px; 42 | transform: rotate(-15deg); 43 | } 44 | 45 | .new-banner a { 46 | text-decoration: none; 47 | color: rgba(0, 0, 0, 0.7); 48 | cursor: pointer; 49 | } 50 | 51 | .new-banner a:hover { 52 | color: rgba(0, 0, 0, 0.5); 53 | } 54 | 55 | .new-banner strong { 56 | font-size: 2em; 57 | } 58 | 59 | .section { 60 | color: white; 61 | padding: 85px 50px; 62 | text-align: center; 63 | min-height: 100vh; 64 | position: relative; } 65 | .section h1 { 66 | font-family: 'Dancing Script', cursive; 67 | font-size: 3.4em; 68 | overflow: hidden; 69 | text-overflow: ellipsis; 70 | white-space: nowrap; } 71 | .section h4 { 72 | font-size: 1.4em; 73 | font-family: 'Gentium Basic', serif; 74 | line-height: 1.5; 75 | margin-bottom: 1.5em; } 76 | .section > p { 77 | margin-top: 25px; 78 | line-height: 1.5em; } 79 | .section a { 80 | color: rgba(0, 0, 0, 0.5); } 81 | .section a:link { 82 | text-decoration: none; } 83 | .section a:hover { 84 | color: rgba(0, 0, 0, 0.85); } 85 | .section footer { 86 | position: absolute; 87 | bottom: 10px; 88 | width: 100%; 89 | left: 0; 90 | line-height: 1.3em; } 91 | 92 | 93 | a[href^="#"] { 94 | position: relative; 95 | display: inline-block; 96 | overflow: visible; 97 | } 98 | 99 | a[href^="#"] h1[id] { 100 | padding-right: .1em; 101 | padding-left: .1em; 102 | } 103 | 104 | a[href^="#"], 105 | a[href^="#"]:hover { 106 | color: inherit; 107 | } 108 | 109 | a[href^="#"]:hover:before { 110 | opacity: 1; 111 | } 112 | 113 | a[href^="#"]:before { 114 | content: '#'; 115 | position: absolute; 116 | top: 0; 117 | right: 100%; 118 | font-size: 2em; 119 | font-family: 'Dancing Script', cursive; 120 | opacity: 0; 121 | transition: opacity .25s; 122 | } 123 | 124 | .home { 125 | width: 100%; 126 | position: relative; 127 | text-align: center; } 128 | .home h1, 129 | .home h4 { 130 | color: white; 131 | margin-top: .5em; } 132 | .home h1:after { 133 | content: attr(title); 134 | position: absolute; 135 | font-size: .25em; 136 | margin-left: -1em; 137 | color: rgba(255, 255, 255, 0.7); } 138 | 139 | .glass { 140 | position: relative; 141 | display: inline-block; 142 | border-top: 169px solid white; 143 | border-left: 9px solid transparent; 144 | border-right: 9px solid transparent; 145 | height: 0; 146 | margin-top: 10em; 147 | width: 70px; } 148 | .glass:before, .glass:after { 149 | content: ''; 150 | position: absolute; 151 | border-left: 9px solid transparent; 152 | border-right: 9px solid transparent; 153 | height: 0; 154 | left: -9px; 155 | width: 70px; } 156 | .glass:before { 157 | border-top: 169px solid rgba(0, 0, 0, 0.07); 158 | top: -169px; 159 | width: 58px; } 160 | .glass:after { 161 | border-top: 94px solid rgba(0, 0, 0, 0.05); 162 | transform: rotate(180deg); } 163 | 164 | .bubble { 165 | position: absolute; 166 | width: 25px; 167 | height: 25px; 168 | background-color: #fff; 169 | border-radius: 50%; } 170 | .bubble.big { 171 | width: 34px; 172 | height: 34px; } 173 | .bubble.small { 174 | width: 16px; 175 | height: 16px; } 176 | .bubble:nth-of-type(1) { 177 | box-shadow: inset 0 -3px 0 rgba(64, 83, 102, 0.1); } 178 | .bubble:nth-of-type(2) { 179 | box-shadow: inset 0 -2px 0 rgba(64, 83, 102, 0.1); } 180 | .bubble:nth-of-type(3) { 181 | box-shadow: inset 0 -3px 0 rgba(64, 83, 102, 0.1); } 182 | .bubble:nth-of-type(4) { 183 | box-shadow: inset 0 0px 0 rgba(64, 83, 102, 0.1); } 184 | .bubble:nth-of-type(5) { 185 | box-shadow: inset 0 -1px 0 rgba(64, 83, 102, 0.1); } 186 | .bubble:nth-of-type(6) { 187 | box-shadow: inset 0 -2px 0 rgba(64, 83, 102, 0.1); } 188 | .bubble:nth-of-type(7) { 189 | box-shadow: inset 0 -2px 0 rgba(64, 83, 102, 0.1); } 190 | .bubble:nth-of-type(8) { 191 | box-shadow: inset 0 0px 0 rgba(64, 83, 102, 0.1); } 192 | .bubble:nth-of-type(9) { 193 | box-shadow: inset 0 0px 0 rgba(64, 83, 102, 0.1); } 194 | .bubble:nth-of-type(10) { 195 | box-shadow: inset 0 -3px 0 rgba(64, 83, 102, 0.1); } 196 | 197 | .bubble:nth-child(1) { 198 | top: -180px; 199 | left: -12px; } 200 | 201 | .bubble:nth-child(2) { 202 | top: -200px; 203 | left: -5px; } 204 | 205 | .bubble:nth-child(3) { 206 | top: -172px; 207 | left: 10px; } 208 | 209 | .bubble:nth-child(4) { 210 | top: -193px; 211 | left: 25px; } 212 | 213 | .bubble:nth-child(5) { 214 | top: -184px; 215 | left: 20px; } 216 | 217 | .bubble:nth-child(6) { 218 | top: -178px; 219 | left: 40px; } 220 | 221 | .bubble:nth-child(7) { 222 | top: -182px; 223 | left: 60px; } 224 | 225 | .bubble:nth-child(8) { 226 | top: -182px; 227 | left: 55px; } 228 | 229 | .bubble:nth-child(9) { 230 | top: -205px; 231 | left: 25px; } 232 | 233 | .bubble:nth-child(10) { 234 | top: -170px; 235 | left: -20px; } 236 | 237 | .straw { 238 | position: absolute; 239 | width: 10px; 240 | height: 140px; 241 | background-color: red; 242 | top: -300px; 243 | left: 61px; 244 | transform: rotate(7deg); 245 | z-index: -1; 246 | background-color: #e96144; 247 | background-image: repeating-linear-gradient(45deg, transparent, transparent 16px, rgba(255, 255, 255, 0.9) 16px, rgba(255, 255, 255, 0.9) 32px); 248 | box-shadow: inset -5px 0 0 rgba(0, 0, 0, 0.1); } 249 | 250 | .arrow { 251 | position: absolute; 252 | bottom: 2.5em; 253 | left: 50%; 254 | margin-left: -10px; 255 | width: 0; 256 | height: 0; 257 | border-left: 15px solid transparent; 258 | border-right: 15px solid transparent; 259 | border-top: 15px solid rgba(255, 255, 255, 0.3); } 260 | .arrow:before { 261 | content: ''; 262 | position: absolute; 263 | top: -18px; 264 | left: -12px; 265 | width: 0; 266 | height: 0; 267 | border-left: 12px solid transparent; 268 | border-right: 12px solid transparent; } 269 | .section.shamrock .arrow:before { 270 | border-top: 14px solid #2ab8ac; } 271 | .section.carrot .arrow:before { 272 | border-top: 14px solid #ffab52; } 273 | .section.amethyst .arrow:before { 274 | border-top: 14px solid #9c55a5; } 275 | .section.scooter .arrow:before { 276 | border-top: 14px solid #57cadd; } 277 | .section.dolly .arrow:before { 278 | border-top: 14px solid #fff68d; } 279 | .section.shamrock .arrow:before { 280 | border-top: 14px solid #2ab8ac; } 281 | .section.pear .arrow:before { 282 | border-top: 14px solid #cce033; } 283 | 284 | .section.carrot { 285 | background-color: #ffab52; } 286 | .section.amethyst { 287 | background-color: #9c55a5; } 288 | .section.scooter { 289 | background-color: #57cadd; } 290 | .section.dolly { 291 | background-color: #fff68d; 292 | color: #2C3E50; } 293 | .section.shamrock { 294 | background-color: #2ab8ac; } 295 | .section.pear { 296 | background-color: #cce033; } 297 | 298 | .color-carrot { 299 | color: #ffab52; } 300 | 301 | .color-amethyst { 302 | color: #9c55a5; } 303 | 304 | .color-scooter { 305 | color: #57cadd; } 306 | 307 | .color-dolly { 308 | color: #fff68d; } 309 | 310 | .color-shamrock { 311 | color: #2ab8ac; } 312 | 313 | .color-pear { 314 | color: #cce033; } 315 | 316 | .previews { 317 | display: block; 318 | list-style: none; 319 | width: 85%; 320 | margin: 34px auto 0; } 321 | .previews li { 322 | display: inline-block; 323 | width: 150px; 324 | padding: 20px; 325 | vertical-align: middle; } 326 | .previews.smalls { 327 | display: inline-block; 328 | width: auto; 329 | padding: 34px 25px; 330 | border: 1px solid rgba(255, 255, 255, 0.3); 331 | border-radius: 15px; } 332 | .previews.smalls li { 333 | padding: 5px; 334 | width: auto; } 335 | .previews.bigs li { 336 | max-width: 250px; 337 | width: 100%; } 338 | 339 | .preview-item { 340 | font-family: 'Dancing Script', cursive; 341 | font-size: 70px; 342 | line-height: 100px; 343 | position: relative; 344 | width: 100px; 345 | height: 100px; 346 | border-radius: 15px; 347 | color: rgba(255, 255, 255, 0.3); 348 | margin: auto; } 349 | .preview-item.big { 350 | width: 100%; 351 | height: 0; 352 | font-size: 110px; 353 | line-height: 100%; 354 | padding-bottom: 100%; } 355 | .preview-item.small { 356 | display: inline-block; 357 | width: 40px; 358 | height: 40px; 359 | line-height: 40px; } 360 | .preview-item.small:after { 361 | display: none; } 362 | .section.carrot .preview-item { 363 | background-color: #ffc485; } 364 | .section.amethyst .preview-item { 365 | background-color: #b075b8; } 366 | .section.scooter .preview-item { 367 | background-color: #81d7e6; } 368 | .section.dolly .preview-item { 369 | background-color: #fffac0; } 370 | .section.shamrock .preview-item { 371 | background-color: #41d4c7; } 372 | .section.pear .preview-item { 373 | background-color: #d7e75f; } 374 | .preview-item.transp { 375 | color: white; 376 | background-color: transparent!important; } 377 | .preview-item:after { 378 | content: ""; 379 | width: 0; 380 | height: 0; 381 | border-left: 33px solid transparent; 382 | position: absolute; 383 | bottom: 0px; 384 | right: 0px; } 385 | .section.carrot .preview-item:after { 386 | border-bottom: 33px solid #ffab52; } 387 | .section.amethyst .preview-item:after { 388 | border-bottom: 33px solid #9c55a5; } 389 | .section.scooter .preview-item:after { 390 | border-bottom: 33px solid #57cadd; } 391 | .section.dolly .preview-item:after { 392 | border-bottom: 33px solid #fff68d; } 393 | .section.shamrock .preview-item:after { 394 | border-bottom: 33px solid #2ab8ac; } 395 | .section.pear .preview-item:after { 396 | border-bottom: 33px solid #cce033; } 397 | 398 | .preview-item.small[class*="shake"]:before { 399 | content: 'A'; 400 | position: absolute; 401 | top: 0; 402 | left: 0; 403 | font-size: 20px; 404 | text-align: center; 405 | width: 100%; 406 | color: rgba(0, 0, 0, 0.4); } 407 | 408 | .preview-icon { 409 | position: absolute; 410 | left: 50%; 411 | top: 50%; 412 | transform: translate(-50%, -50%); } 413 | 414 | .flip { 415 | position: absolute; 416 | right: 0; 417 | bottom: 0; 418 | width: 0; 419 | height: 0; 420 | border-right: 30px solid transparent; } 421 | .section.carrot .flip { 422 | border-top: 30px solid #ffd09f; } 423 | .section.amethyst .flip { 424 | border-top: 30px solid #ba86c1; } 425 | .section.scooter .flip { 426 | border-top: 30px solid #97deea; } 427 | .section.dolly .flip { 428 | border-top: 30px solid #fffcda; } 429 | .section.shamrock .flip { 430 | border-top: 30px solid #56d8cd; } 431 | .section.pear .flip { 432 | border-top: 30px solid #ddea75; } 433 | .flip:after { 434 | content: ""; 435 | width: 0; 436 | height: 0; 437 | border-bottom: 30px solid rgba(0, 0, 0, 0.15); 438 | border-left: 30px solid transparent; 439 | position: absolute; 440 | bottom: 0; 441 | left: -30px; } 442 | 443 | .preview-desc { 444 | margin-top: 20px; 445 | font-family: 'Gentium Basic', serif; } 446 | 447 | .dropdown { 448 | position: relative; 449 | margin: 25px auto; 450 | height: 50px; 451 | max-width: 300px; } 452 | .dropdown::after { 453 | content: "➘"; 454 | position: absolute; 455 | right: 11px; 456 | top: 13px; 457 | color: rgba(0, 0, 0, 0.2); 458 | font-size: 25px; } 459 | 460 | .dropdown-select { 461 | position: relative; 462 | width: 100%; 463 | margin: 0; 464 | padding: 6px 8px 6px 10px; 465 | height: 50px; 466 | line-height: 25px; 467 | font-family: 'Dancing Script', cursive; 468 | font-size: 25px; 469 | color: rgba(0, 0, 0, 0.5); 470 | background-color: rgba(255, 255, 255, 0.1); 471 | transition: background-color .3s; 472 | border: none; 473 | outline: none; 474 | border: 0; 475 | border-radius: 0; 476 | -webkit-appearance: none; } 477 | .dropdown-select:hover, .dropdown-select:active { 478 | background-color: rgba(255, 255, 255, 0.5); } 479 | .dropdown-select > option { 480 | margin: 3px; 481 | padding: 6px 8px; 482 | text-shadow: none; 483 | border-radius: 3px; 484 | cursor: pointer; } 485 | 486 | .btn { 487 | position: relative; 488 | font-family: 'Dancing Script', cursive; 489 | font-size: 40px; 490 | padding: 10px 20px; 491 | margin-top: 34px; 492 | display: inline-block; 493 | transition: background-color, .3s; } 494 | .btn.carrot { 495 | background-color: #ffab52; } 496 | .btn.amethyst { 497 | background-color: #9c55a5; } 498 | .btn.light:hover { 499 | background-color: rgba(0, 0, 0, 0.1); } 500 | 501 | .btn + small { 502 | font-family: 'Gentium Basic', serif; 503 | font-size: 85%; 504 | margin-top: 1.5em; 505 | display: block; } 506 | 507 | .badge { 508 | position: absolute; 509 | top: -.5rem; 510 | right: -.5rem; 511 | border-radius: 5px; 512 | background-color: #cce033; 513 | font-family: 'Helvetica Neue', 'Arial', sans; 514 | font-size: .7rem; 515 | padding: 0 .5rem; 516 | } 517 | 518 | pre[class*="shake"][class*="language"] { 519 | padding: .3em .5em; 520 | margin: .85em .5em; 521 | display: block; } 522 | pre[class*="shake"][class*="language"] code { 523 | font-size: .85em; } 524 | 525 | @media (min-width: 40em) { 526 | pre[class*="shake"][class*="language"] { 527 | display: inline-block; } 528 | 529 | .section h1 { 530 | font-size: 5em; } 531 | 532 | .u-mt2 { 533 | margin-top: 1rem; } 534 | 535 | .u-mt3 { 536 | margin-top: 2rem; } 537 | 538 | .u-mt4 { 539 | margin-top: 4rem; } 540 | 541 | .dib { 542 | display: inline-block; 543 | } 544 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | CSShake 11 | 16 | 21 | 22 | 23 | 28 | 52 | 172 | 173 | 174 |
175 |
176 | reshake
CSShake as a React functional 178 | Component 180 |
181 |
182 |
183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 |
195 |

196 | CSShake 197 |

198 |

199 | Some CSS classes to move your DOM! 200 |

201 |
202 | 208 |
209 |
210 | 211 |

Classes

212 | 213 |

The basic collection

214 |
    215 |
  • 216 | 217 | Bs 218 | 219 | 220 |

    Basic Shake

    221 |
    • 222 |
  • 223 | 224 | Ss 225 | 226 | 227 |

    Slow Shake

    228 |
    • 229 |
  • 230 | 231 | Ls 232 | 233 | 234 |

    Little Shake

    235 |
    • 236 |
  • 237 | 238 | Hs 239 | 240 | 241 |

    Hard Shake

    242 |
    • 243 |
  • 244 | 245 | ⇄ 246 | 247 | 248 |

    Fixed Horizontal

    249 |
    • 250 |
  • 251 | 252 | ⇵ 253 | 254 | 255 |

    Fixed Vertical

    256 |
    • 257 |
  • 258 | 259 | ↻ 260 | 261 | 262 |

    Fixed Rotation

    263 |
    • 264 |
  • 265 | 266 | Os 267 | 268 | 269 |

    Opacity Shake

    270 |
    • 271 |
  • 272 | 273 | ✌ 274 | 275 | 276 |

    Crazy Shake

    277 |
    • 278 |
  • 279 | 280 | ℇ 281 | 282 | 283 |

    Constant Shake

    284 |
    • 285 |
  • 286 | 287 | % 288 | 289 | 290 |

    Chunk Shake

    291 |
    • 292 |
293 | 294 |
    295 |
    • 296 |
    • 297 |
    • 298 |
    • 299 |
    • 300 |
    • 301 |
    • 302 |
    303 |
    • 304 |
    • 305 |
  • 306 | 307 |
    • 308 |
    • 309 |
  • 310 | 313 |
    • 314 |
  • 315 | 316 |
    • 317 |
    • 318 |
    • 319 |
    320 |
    • 321 |
    • 322 |
  • 323 | 326 |
    • 327 |
    • 328 |
    • 329 |
    • 330 |
    • 331 |
332 |

333 | Launch the animations from the parent with class 'shake-trigger' 334 | (customizable) 335 |

336 |
337 |
338 |
339 | 340 |

Install

341 | 342 |

Get started...

343 | 
$ git clone https://github.com/elrumordelaluz/csshake.git
346 |
347 |
or
348 | 
$ bower install csshake
349 |
350 |
or
351 | 
$ npm i csshake
352 |
353 |
354 | or
355 | Download Center 360 |
Download separated files for each shake animation, expanded or 361 | minified. 362 |
363 |

364 | 365 | cdnjs.com 366 | New 367 | 368 |

369 | 370 |

How to use

371 | 372 |

Include the css file then apply classes to elements

373 | 
<link rel="stylesheet" type="text/css" href="csshake.min.css">
376 | <!-- or from surge.sh -->
377 | <link rel="stylesheet" type="text/css" href="https://csshake.surge.sh/csshake.min.css">
378 |
379 | 
<div class="shake"></div>
382 | 
<div class="shake-hard"></div>
385 | 
<div class="shake-slow"></div>
388 | 
<div class="shake-little"></div>
391 | 
<div class="shake-horizontal"></div>
394 | 
<div class="shake-vertical"></div>
397 | 
<div class="shake-rotate"></div>
400 | 
<div class="shake-opacity"></div>
403 | 
<div class="shake-crazy"></div>
406 | 
<div class="shake-chunk"></div>
409 |
410 | 
411 | <ul class="shake-trigger">
412 |  <li class="shake-slow"></li>
413 |  <li></li>
414 |  <li></li>
415 |  <li class="shake-hard"></li>
416 |  <li></li>
417 |  <li class="shake"></li>
418 | </ul>
419 | 
<!-- To include only some csshake animations use this syntax -->
422 | <link rel="stylesheet" type="text/css" href="csshake-slow.min.css">
423 | <!-- or from surge.sh -->
424 | <link rel="stylesheet" type="text/css" href="http://csshake.surge.sh/csshake-slow.min.css">
425 |
426 |
427 |
428 | 429 |
430 | 431 |

Variations

432 | 433 |

Some things you could add...

434 |
    435 |
  • 436 | 437 | 🙊 438 | 439 |

    Freezed after Shake

    440 |
    • 441 |
  • 442 | 446 | 🙈 447 | 448 |

    Constant and stops on :hover

    449 |
    • 450 |
451 |
452 | 463 |
464 |
465 | 
<!-- To shake constant -->
466 | <div class="shake-slow shake-constant"></div>
467 | <!-- and stops on :hover -->
468 | <div class="shake-slow shake-constant shake-constant--hover"></div>
469 | 
<!-- Freeze animation at that point when :hover -->
472 | <div class="shake-crazy shake-freeze"></div>
473 |
474 |
475 | 476 |
477 | 478 |

More flexibility

479 | 480 |

The do-shake @mixin, and so on...

481 | 
.my-custom-shake {
482 |   @include do-shake(
483 |         $name: 'my-custom-shake', /* {String} is the name for the keyframes animation */
484 |         $h: 5px, /*  {Number} is the max number for random to assign in x axis */
485 |         $v: 5px, /* {Number} is the max number for random to assign in y axis */
486 |         $r: 3deg, /* {Number} is the max number for random rotation */
487 |         $dur: 100ms, /* {Number} is the animation-duration time value */
488 |         $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; */
489 |         $opacity: false, 
490 |         $q: infinite, /* {String} is the animation-iteration-count value */
491 |         $t: ease-in-out, /* {String} animation-timing-function value */
492 |         $delay: null, /* {Number} animation-delay time value */
493 |         $chunk: 100%); /* {Number} is the part of the keyframes where apply the animation */
494 | }
495 | 
496 | /* Example shake-crazy */
497 | .shake-crazy { 
498 | 	@include do-shake('shake-crazy', 40, 40, 20, 100ms, .1, $opacity: true); 
499 | }
500 |
501 |
502 |
503 |
504 | 505 |

Last words

506 | 507 |

508 | The about, the idea, and the desire to hear from you to improve the 509 | code... 510 |

511 |

512 | I had to make a shake animation for a big project. I did it in vanilla 513 | CSS at the begining.
After I finished it I discovered 514 | this 519 | cool jQuery plugin by 520 | @jackrugile.
523 | Then I started to think I should make this little CSS project. 524 |

525 | Download 528 |
529 | Fork me on Github 534 |

535 | 541 | 554 | 561 |

562 | 572 |
573 |
574 | 575 | 579 | 596 | 597 | 598 | -------------------------------------------------------------------------------- /downloadIndex.js: -------------------------------------------------------------------------------- 1 | const pug = require('pug') 2 | const gzipSize = require('gzip-size') 3 | const prettyBytes = require('pretty-bytes') 4 | const fs = require('fs') 5 | const version = require('./package.json').version 6 | 7 | const compiledFunction = pug.compileFile('template-downloads.pug', { 8 | pretty: true, 9 | }) 10 | 11 | fs.readdir('dist', (err, files) => { 12 | const cssFiles = files.filter(file => file.indexOf('.css') !== -1) 13 | const gzips = Promise.all(cssFiles.map(file => gzipSize.file(`dist/${file}`))) 14 | gzips.then(gz => { 15 | // [0] file name, [1] file size 16 | const sizes = gz.map((itemSize, i) => ([ 17 | cssFiles[i], prettyBytes(itemSize), 18 | ])) 19 | fs.writeFile('dist/index.html', compiledFunction({ sizes, version }), err => { 20 | if (err) throw err 21 | console.log('The download index has been saved!') 22 | }) 23 | }) 24 | }) 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "csshake", 3 | "version": "1.7.0", 4 | "description": "Some CSS classes to move your DOM!", 5 | "main": "dist/csshake.css", 6 | "scripts": { 7 | "start": "npm run build", 8 | "watch": "sass --watch scss/csshake.scss:docs/csshake.css", 9 | "build": "npm run build:raw && npm run build:min && npm run build:docs && node downloadIndex.js", 10 | "build:docs": "sass scss/csshake.scss:docs/csshake.css --style compressed", 11 | "build:raw": "sass scss/:dist/", 12 | "build:min": "mkdir -p dist/min && sass --style compressed scss/:dist/min && npm run suffix && npm run move", 13 | "suffix": "for file in dist/min/*.css; do mv \"$file\" \"${file%.css}.min.css\"; done", 14 | "move": "mv dist/min/*.css dist && rm -r dist/min" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "https://github.com/elrumordelaluz/csshake.git" 19 | }, 20 | "keywords": [ 21 | "css", 22 | "transitions", 23 | "animations" 24 | ], 25 | "author": "Lionel T (http://elrumordelaluz.com)", 26 | "contributors": [ 27 | { 28 | "name": "Peter Nyari", 29 | "url": "https://github.com/netwarex", 30 | "email": "peter.nyari@ioflair.com" 31 | } 32 | ], 33 | "license": "MIT", 34 | "bugs": { 35 | "url": "https://github.com/elrumordelaluz/csshake/issues" 36 | }, 37 | "homepage": "https://github.com/elrumordelaluz/csshake", 38 | "devDependencies": { 39 | "gzip-size": "5.1.1", 40 | "pretty-bytes": "5.2.0", 41 | "pug": "^3.0.2", 42 | "sass": "1.51.0" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /params.json: -------------------------------------------------------------------------------- 1 | {"name":"Csshake","tagline":"CSS classes to move your DOM!","body":"csshake\r\n=======\r\n\r\nCSS classes to move your DOM!\r\n","google":"UA-48410558-1","note":"Don't delete this file! It's used internally to help with page regeneration."} -------------------------------------------------------------------------------- /sache.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "CSS Shake", 3 | "description": "Some CSS classes to move your DOM!", 4 | "tags": ["shake","move","classes"] 5 | } 6 | -------------------------------------------------------------------------------- /scss/_tools.scss: -------------------------------------------------------------------------------- 1 | // Variables 2 | $prefix: 'shake' !default; 3 | $trigger: 'shake-trigger' !default; 4 | 5 | // Placeholders 6 | %shake { 7 | display: inherit; 8 | transform-origin: center center; 9 | } 10 | 11 | %paused { animation-play-state: paused; } 12 | %running { animation-play-state: running; } 13 | 14 | @function apply-random($input) { 15 | @return if($input != 0, random($input) - $input*0.5, 0); 16 | } 17 | 18 | /// Do The Shake 19 | /// @param {String} $name ['shake'] - Name for the keyframes animation 20 | /// @param {Number} $h [5px] - Max number for random to assign in x axis 21 | /// @param {Number} $v [5px] - Max number for random to assign in y axis 22 | /// @param {Number} $r [3deg] - Max number for random rotation 23 | /// @param {Number} $dur [100ms] - animation-duration; valid time value 24 | /// @param {Number} $precision [.1] - Precision of the keyframes animation (i.e 2 > 2%, 4%, 6%...) 25 | /// @param {Boolean} $opacity [false] - To apply random animation also in the opacity property 26 | /// @param {String} $q [infinite] - animation-iteration-count; valid value 27 | /// @param {String} $t [ease-in-out] - animation-timing-function; valid value 28 | /// @param {Number} $delay [null] - animation-delay; valid time value 29 | /// @param {Number} $chunk [100%] - Part of 100% where apply the animation 30 | @mixin do-shake( 31 | $name: 'shake', 32 | $h: 5px, 33 | $v: 5px, 34 | $r: 3deg, 35 | $dur: 100ms, 36 | $precision: .02, 37 | $opacity: false, 38 | $q: infinite, 39 | $t: ease-in-out, 40 | $delay: null, 41 | $chunk: 100% 42 | ) { 43 | 44 | $rotate: 0; 45 | $move-x: 0; 46 | $move-y: 0; 47 | 48 | $h: if(unitless($h) and $h != 0, $h * 1px, $h); 49 | $v: if(unitless($v) and $v != 0, $v * 1px, $v); 50 | $r: if(unitless($r) and $r != 0, $r * 1deg, $r); 51 | 52 | // Keyframes 53 | @at-root { 54 | @keyframes #{$name} { 55 | $interval: if($precision > 0 and $precision < 1, 100 * $precision, 10); 56 | $step: $interval * 1%; 57 | 58 | @while $step < $chunk { 59 | $rotate: apply-random($r); 60 | $move-x: apply-random($h); 61 | $move-y: apply-random($v); 62 | 63 | #{$step} { 64 | transform: translate($move-x, $move-y) rotate($rotate); 65 | @if $opacity { opacity: random(100) * 0.01; } 66 | } 67 | 68 | $step: $step + $interval; 69 | } 70 | 71 | #{ if($chunk < 100%, (0%, $chunk, 100%), (0%, 100%)) } { 72 | transform: translate(0, 0) rotate(0); 73 | } 74 | 75 | } 76 | } 77 | 78 | @extend %shake; 79 | 80 | &:hover, 81 | .#{$trigger}:hover &, 82 | &.#{$prefix}-freeze, 83 | &.#{$prefix}-constant { 84 | @if $delay { animation-delay: $delay; } 85 | animation-name: #{$name}; 86 | animation-duration: $dur; 87 | animation-timing-function: $t; 88 | animation-iteration-count: $q; 89 | } 90 | 91 | &:hover, 92 | .#{$trigger}:hover & { @extend %running; } 93 | 94 | } 95 | 96 | .#{$prefix}-freeze, 97 | .#{$prefix}-constant.#{$prefix}-constant--hover:hover, 98 | .#{$trigger}:hover .#{$prefix}-constant.#{$prefix}-constant--hover { 99 | @extend %paused; 100 | } 101 | 102 | .#{$prefix}-freeze:hover, 103 | .#{$trigger}:hover .#{$prefix}-freeze { @extend %running; } 104 | -------------------------------------------------------------------------------- /scss/csshake-crazy.scss: -------------------------------------------------------------------------------- 1 | /*! * * * * * * * * * * * * * * * * * * * *\ 2 | CSShake :: shake-crazy 3 | v1.6.0 4 | CSS classes to move your DOM 5 | (c) 2015 @elrumordelaluz 6 | http://elrumordelaluz.github.io/csshake/ 7 | Licensed under MIT 8 | \* * * * * * * * * * * * * * * * * * * * */ 9 | @import 'tools'; 10 | 11 | .shake-crazy { @include do-shake('shake-crazy', 40, 40, 20, 100ms, .1, $opacity: true); } 12 | -------------------------------------------------------------------------------- /scss/csshake-default.scss: -------------------------------------------------------------------------------- 1 | /*! * * * * * * * * * * * * * * * * * * * *\ 2 | CSShake :: shake 3 | v1.6.0 4 | CSS classes to move your DOM 5 | (c) 2015 @elrumordelaluz 6 | http://elrumordelaluz.github.io/csshake/ 7 | Licensed under MIT 8 | \* * * * * * * * * * * * * * * * * * * * */ 9 | @import 'tools'; 10 | 11 | .shake { @include do-shake(); } 12 | -------------------------------------------------------------------------------- /scss/csshake-hard.scss: -------------------------------------------------------------------------------- 1 | /*! * * * * * * * * * * * * * * * * * * * *\ 2 | CSShake :: shake-hard 3 | v1.6.0 4 | CSS classes to move your DOM 5 | (c) 2015 @elrumordelaluz 6 | http://elrumordelaluz.github.io/csshake/ 7 | Licensed under MIT 8 | \* * * * * * * * * * * * * * * * * * * * */ 9 | @import 'tools'; 10 | 11 | .shake-hard { @include do-shake('shake-hard', 20, 20, 7); } 12 | -------------------------------------------------------------------------------- /scss/csshake-horizontal.scss: -------------------------------------------------------------------------------- 1 | /*! * * * * * * * * * * * * * * * * * * * *\ 2 | CSShake :: shake-horizontal 3 | v1.6.0 4 | CSS classes to move your DOM 5 | (c) 2015 @elrumordelaluz 6 | http://elrumordelaluz.github.io/csshake/ 7 | Licensed under MIT 8 | \* * * * * * * * * * * * * * * * * * * * */ 9 | @import 'tools'; 10 | 11 | .shake-horizontal { @include do-shake('shake-horizontal', 20, 0, 0); } 12 | -------------------------------------------------------------------------------- /scss/csshake-little.scss: -------------------------------------------------------------------------------- 1 | /*! * * * * * * * * * * * * * * * * * * * *\ 2 | CSShake :: shake-little 3 | v1.6.0 4 | CSS classes to move your DOM 5 | (c) 2015 @elrumordelaluz 6 | http://elrumordelaluz.github.io/csshake/ 7 | Licensed under MIT 8 | \* * * * * * * * * * * * * * * * * * * * */ 9 | @import 'tools'; 10 | 11 | .shake-little { @include do-shake('shake-little', 2, 2, 1); } 12 | -------------------------------------------------------------------------------- /scss/csshake-rotate.scss: -------------------------------------------------------------------------------- 1 | /*! * * * * * * * * * * * * * * * * * * * *\ 2 | CSShake :: shake-rotate 3 | v1.6.0 4 | CSS classes to move your DOM 5 | (c) 2015 @elrumordelaluz 6 | http://elrumordelaluz.github.io/csshake/ 7 | Licensed under MIT 8 | \* * * * * * * * * * * * * * * * * * * * */ 9 | @import 'tools'; 10 | 11 | .shake-rotate { @include do-shake('shake-rotate', 0, 0, 15); } 12 | -------------------------------------------------------------------------------- /scss/csshake-slow.scss: -------------------------------------------------------------------------------- 1 | /*! * * * * * * * * * * * * * * * * * * * *\ 2 | CSShake :: shake-slow 3 | v1.6.0 4 | CSS classes to move your DOM 5 | (c) 2015 @elrumordelaluz 6 | http://elrumordelaluz.github.io/csshake/ 7 | Licensed under MIT 8 | \* * * * * * * * * * * * * * * * * * * * */ 9 | @import 'tools'; 10 | 11 | .shake-slow { @include do-shake('shake-slow', 20, 20, 7, 5s); } 12 | -------------------------------------------------------------------------------- /scss/csshake-vertical.scss: -------------------------------------------------------------------------------- 1 | /*! * * * * * * * * * * * * * * * * * * * *\ 2 | CSShake :: shake-vertical 3 | v1.6.0 4 | CSS classes to move your DOM 5 | (c) 2015 @elrumordelaluz 6 | http://elrumordelaluz.github.io/csshake/ 7 | Licensed under MIT 8 | \* * * * * * * * * * * * * * * * * * * * */ 9 | @import 'tools'; 10 | 11 | .shake-vertical { @include do-shake('shake-vertical', 0, 20, 0); } 12 | -------------------------------------------------------------------------------- /scss/csshake.scss: -------------------------------------------------------------------------------- 1 | /*! * * * * * * * * * * * * * * * * * * * *\ 2 | CSShake :: Package 3 | v1.6.0 4 | CSS classes to move your DOM 5 | (c) 2015 @elrumordelaluz 6 | http://elrumordelaluz.github.io/csshake/ 7 | Licensed under MIT 8 | \* * * * * * * * * * * * * * * * * * * * */ 9 | @import 'tools'; 10 | 11 | .shake { @include do-shake(); } 12 | .shake-little { @include do-shake('shake-little', 2, 2, 1); } 13 | .shake-slow { @include do-shake('shake-slow', 20, 20, 7, 5s); } 14 | .shake-hard { @include do-shake('shake-hard', 20, 20, 7); } 15 | .shake-horizontal { @include do-shake('shake-horizontal', 20, 0, 0); } 16 | .shake-vertical { @include do-shake('shake-vertical', 0, 20, 0); } 17 | .shake-rotate { @include do-shake('shake-rotate', 0, 0, 15); } 18 | .shake-opacity { @include do-shake('shake-opacity', 10, 10, 5, .5s, .1, $opacity: true); } 19 | .shake-crazy { @include do-shake('shake-crazy', 40, 40, 20, 100ms, .1, $opacity: true); } 20 | .shake-chunk { @include do-shake('shake-chunk', 30, 30, 30, 4s, $chunk: 40%); } 21 | -------------------------------------------------------------------------------- /template-downloads.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang="en") 3 | head 4 | title CSS Shake :: Download center 5 | link(href="https://fonts.googleapis.com/css?family=Dancing+Script", rel="stylesheet", type="text/css") 6 | link(href="https://fonts.googleapis.com/css?family=Open+Sans:400,300", rel="stylesheet", type="text/css") 7 | link(href="csshake.min.css", rel="stylesheet", type="text/css") 8 | style(type="text/css"). 9 | body { 10 | background-color: #2ab8ac; 11 | color: white; 12 | font-family: 'Open Sans', sans-serif; 13 | font-weight: 300; 14 | text-align: center; 15 | } 16 | h1, 17 | h3 { 18 | font-family: 'Dancing Script', cursive; 19 | font-weight: 100; 20 | } 21 | h1 { font-size: 4em } 22 | h3 { font-size: 2em } 23 | a { color: inherit; } 24 | .main-title:after { 25 | content: attr(title); 26 | position: absolute; 27 | font-size: .25em; 28 | margin-left: -1em; 29 | color: rgba(255, 255, 255, 0.7); 30 | } 31 | .btn { 32 | display: inline-block; 33 | background-color: transparent; 34 | border: 1px solid; 35 | color: white; 36 | font-size: 14px; 37 | letter-spacing: 1px; 38 | line-height: 1; 39 | margin: .5em; 40 | text-decoration: none; 41 | text-transform: uppercase; 42 | transition: .3s; 43 | padding: 1.3em; 44 | position: relative; 45 | } 46 | .btn:hover { 47 | background-color: white; 48 | border-color: white; 49 | color: #2ab8ac; 50 | } 51 | .btn:after { 52 | bottom: .5em; 53 | content: attr(href); 54 | font-size: 70%; 55 | left: 50%; 56 | position: absolute; 57 | text-transform: none; 58 | transform: translateX(-50%); 59 | } 60 | h1 small { 61 | font-size: 25%; 62 | font-family: 'Open Sans', sans-serif; 63 | } 64 | footer { margin-top: 2rem } 65 | footer p { font-size: 85% } 66 | footer a { text-decoration: none } 67 | script. 68 | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 69 | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 70 | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 71 | })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 72 | ga('create', 'UA-48410558-2', 'auto'); 73 | ga('send', 'pageview'); 74 | body 75 | h1.main-title(title=`v${version}`) CSShake 76 | h3.shake-slow.shake-constant.shake-constant--hover Download center 77 | br 78 | - const isMainFile = filename => filename === 'csshake.css' || filename === 'csshake.min.css' 79 | - const isMinified = val => val.indexOf('.min') !== -1 80 | - const getCls = val => val.replace(/(^cs|\.css|\.min|-default)/gi, '') 81 | each val in sizes 82 | if isMainFile(val[0]) 83 | - const cls = getCls(val[0]) 84 | - const isMin = isMinified(val[0]) 85 | a.btn.shake( 86 | onclick=`ga('send', 'event', 'download', ${cls}, ${isMin ? 'minified' : 'expanded'})`, 87 | href=val[0] 88 | ) cs#{cls} #{isMin ? 'minified' : ''} Pack (#{val[1]}) 89 | br 90 | br 91 | - let current = '' 92 | each val in sizes 93 | if !isMainFile(val[0]) 94 | - const cls = getCls(val[0]) 95 | a.btn( 96 | class=cls, 97 | onclick=`ga('send', 'event', 'download', ${cls}, ${isMinified(val[0]) ? 'minified' : 'expanded'})`, 98 | href=val[0] 99 | ) #{val[0].replace('-', ' ')} (#{val[1]}) 100 | if current === cls 101 | br 102 | - current = cls 103 | footer 104 | p Made with <3 by 105 | a(href="https://twitter.com/elrumordelaluz") @elrumordelaluz 106 | | | 107 | a(href="http://elrumordelaluz.github.io/csshake/") Demo 108 | | | 109 | a(href="https://github.com/elrumordelaluz/csshake") Repository 110 | --------------------------------------------------------------------------------