{"id":13407965,"url":"https://github.com/elrumordelaluz/csshake","last_synced_at":"2025-05-13T00:13:36.520Z","repository":{"id":14467860,"uuid":"17179843","full_name":"elrumordelaluz/csshake","owner":"elrumordelaluz","description":"CSS classes to move your DOM!","archived":false,"fork":false,"pushed_at":"2024-06-19T06:15:44.000Z","size":457,"stargazers_count":4865,"open_issues_count":3,"forks_count":614,"subscribers_count":119,"default_branch":"master","last_synced_at":"2025-05-13T00:13:29.635Z","etag":null,"topics":["animation","css","csshake","dom","keyframe-animation","mixins","sass","shaking-animations"],"latest_commit_sha":null,"homepage":"https://elrumordelaluz.github.io/csshake/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/elrumordelaluz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":"FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"elrumordelaluz"}},"created_at":"2014-02-25T16:31:43.000Z","updated_at":"2025-05-12T14:12:19.000Z","dependencies_parsed_at":"2022-07-14T08:09:38.813Z","dependency_job_id":"ab8158ad-598d-4a9d-bb5a-979ce21aa090","html_url":"https://github.com/elrumordelaluz/csshake","commit_stats":{"total_commits":116,"total_committers":13,"mean_commits":8.923076923076923,"dds":0.1293103448275862,"last_synced_commit":"cf2028719550438a4d0b3389805d0841a9ecc2f8"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elrumordelaluz%2Fcsshake","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elrumordelaluz%2Fcsshake/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elrumordelaluz%2Fcsshake/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elrumordelaluz%2Fcsshake/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elrumordelaluz","download_url":"https://codeload.github.com/elrumordelaluz/csshake/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253843225,"owners_count":21972874,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","css","csshake","dom","keyframe-animation","mixins","sass","shaking-animations"],"created_at":"2024-07-30T20:00:49.843Z","updated_at":"2025-05-13T00:13:36.500Z","avatar_url":"https://github.com/elrumordelaluz.png","language":"SCSS","readme":"# CSShake [![npm version](https://badge.fury.io/js/csshake.svg)](http://badge.fury.io/js/csshake)\n\n\u003e Some CSS classes to move your DOM!\n\n### [Live Demo](http://elrumordelaluz.github.io/csshake/)\n\n### [Download Center](https://csshake.surge.sh/)\n\nYou could download the complete `csshake.css` file or separated files for each shake animation (i.e `csshake-little.css`).\nEach one expanded or minified.\n\n## Why\n\nI had to do a 'shake-animation' for a big project. First, I did it in vanilla CSS.\nAfter finish it I discover [this](http://jackrugile.com/jrumble/) cool jQuery plugin by [@jackrugile](https://twitter.com/jackrugile).\nThen I started to think in made _[this little CSS project](http://elrumordelaluz.github.io/csshake/)_\n\n## Install\n\nFork this repo\n\n```\n  $ git clone https://github.com/elrumordelaluz/csshake.git\n```\n\nor via Bower\n\n```\n  $ bower install csshake\n```\n\nor via npm\n\n```\n  $ npm i csshake\n```\n\n#### scripts\n\n```\n  $ npm run watch\n  $ npm run build:raw\n  $ npm run build:min\n```\n\n### CDN\n\nNow is also available in `cdnjs` for each shake animation: https://cdnjs.com/libraries/csshake\n\n## How to use\n\nFirst include the CSS file\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"csshake.css\" /\u003e`\n```\n\nThen call the different classes on the element you want to shake!\n\n```html\n\u003cdiv class=\"shake\"\u003e\u003c/div\u003e\n\u003cdiv class=\"shake shake-hard\"\u003e\u003c/div\u003e\n\u003cdiv class=\"shake shake-slow\"\u003e\u003c/div\u003e\n\u003cdiv class=\"shake shake-little\"\u003e\u003c/div\u003e\n\u003cdiv class=\"shake shake-horizontal\"\u003e\u003c/div\u003e\n\u003cdiv class=\"shake shake-vertical\"\u003e\u003c/div\u003e\n\u003cdiv class=\"shake shake-rotate\"\u003e\u003c/div\u003e\n\u003cdiv class=\"shake shake-opacity\"\u003e\u003c/div\u003e\n\u003cdiv class=\"shake shake-crazy\"\u003e\u003c/div\u003e\n```\n\nAdd also classes to control the `animation-play-state`.\n\n```html\n\u003c!-- Freeze the animation at that point when :hover --\u003e\n\u003cdiv class=\"shake shake-freeze\"\u003e\u003c/div\u003e\n\u003c!-- Continuous animation instead on :hover --\u003e\n\u003cdiv class=\"shake shake-constant\"\u003e\u003c/div\u003e\n\u003c!-- and stop when :hover --\u003e\n\u003cdiv class=\"shake shake-constant shake-constant--hover\"\u003e\u003c/div\u003e\n```\n\n## Customize\n\nYou could customize the Sass @mixins to create new shaking animations, yeah!\nEditing the `do-shake` mixin in `scss/_tools.scss` file\n\n```scss\n.my-custom-shake {\n  @include do-shake(\n    $name: 'my-custom-shake',\n    $h: 5px,\n    $v: 5px,\n    $r: 3deg,\n    $dur: 100ms,\n    $precision: 0.02,\n    $opacity: false,\n    $q: infinite,\n    $t: ease-in-out,\n    $delay: null,\n    $chunk: 100%\n  );\n}\n```\n\n`$name` {String} is the name for the keyframes animation\n\n`$h` {Number} is the max number for random to assign in x axis\n\n`$v` {Number} is the max number for random to assign in y axis\n\n`$r` {Number} is the max number for random rotation\n\n`$dur` {Number} is the `animation-duration` time value\n\n`$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;`\n\n`$opacity` {Boolean} to apply random animation also in the opacity property\n\n`$q` {String} is the `animation-iteration-count` value\n\n`$t` {String} `animation-timing-function` value\n\n`$delay` {Number} `animation-delay` time value\n\n`$chunk` {Number} is the part of the keyframes where apply the animation\n\n### Use with Webpack 2.x\n\nWhen installed with `npm`, import `csshake` inside your css|stylus|sass files with `~` prefix to trigger webpack's module resolving:\n\n```scss\n@import '~csshake';\n```\n\nThis will get you non-minified plain css.\n\n##### Import source sass files\n\nInclude full path relative to your `node_modules` folder with csshake installation\n\n```scss\n@import '~csshake/scss/csshake-hard.scss';\n```\n\n=======\n\n### Changelog\n\n#### [v1.5.0](https://github.com/elrumordelaluz/csshake/releases/tag/v1.5) (October 5, 2015)\n\n- Improve the core mixin for a better output code\n- 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.\n- 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)\n- 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)\n- Update semanthics on modifiers classes\n- Export separated stylesheets for each animation. Solves [issue #20](https://github.com/elrumordelaluz/csshake/issues/20)\n\n======\n\nMade with ♥ by [@elrumordelaluz](http://twitter.com/elrumordelaluz) using [Sass](http://sass-lang.com/).\n","funding_links":["https://github.com/sponsors/elrumordelaluz"],"categories":["SCSS","16. 动画(Animate) ##","Repository","16. 动画(Animate)","Components \u0026\u0026 Librarys","Frameworks / Resources"],"sub_categories":["13.20 视差滚动(Parallax Scrolling) ###","CSS","13.20 视差滚动(Parallax Scrolling)","Animations","C"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felrumordelaluz%2Fcsshake","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felrumordelaluz%2Fcsshake","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felrumordelaluz%2Fcsshake/lists"}