{"id":13469414,"url":"https://github.com/tgdev/animate-sass","last_synced_at":"2025-05-16T03:04:23.215Z","repository":{"id":13134315,"uuid":"15816444","full_name":"tgdev/animate-sass","owner":"tgdev","description":"A Sassy version of Dan Eden's Animate.css","archived":false,"fork":false,"pushed_at":"2022-03-18T02:25:45.000Z","size":86,"stargazers_count":482,"open_issues_count":8,"forks_count":67,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-05-07T18:57:51.152Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tgdev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-01-11T03:58:53.000Z","updated_at":"2025-04-13T13:58:53.000Z","dependencies_parsed_at":"2022-09-01T23:31:22.800Z","dependency_job_id":null,"html_url":"https://github.com/tgdev/animate-sass","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tgdev%2Fanimate-sass","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tgdev%2Fanimate-sass/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tgdev%2Fanimate-sass/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tgdev%2Fanimate-sass/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tgdev","download_url":"https://codeload.github.com/tgdev/animate-sass/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254459088,"owners_count":22074605,"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":[],"created_at":"2024-07-31T15:01:38.568Z","updated_at":"2025-05-16T03:04:18.206Z","avatar_url":"https://github.com/tgdev.png","language":"SCSS","funding_links":[],"categories":["SCSS"],"sub_categories":[],"readme":"# animate-sass\n\n_*Sassy just-add-water CSS animation*_\n\n**animate-sass** is a Sass version of [Dan Eden's](https://github.com/daneden) [Animate.css](https://daneden.me/animate/).\n\n### Installation\n\nAdd animate-sass to your project using one of the methods below.\n\n**NPM: [https://www.npmjs.com/](https://www.npmjs.com/)**\n```bash\n$ npm install animate-sass --save-dev\n```\n\n**Yarn: [https://yarnpkg.com/en/](https://yarnpkg.com/en/)**\n```bash\n$ yarn add animate-sass --dev\n```\n\n**Bower: [http://bower.io](http://bower.io)**\n```bash\n$ bower install animate-sass\n```\n\n### Features\n**animate-sass** has a couple of features to make the most of what Sass has to offer for more efficient development.\n\n##### Animations\n\nAll individual animation modules are kept in their own [Sass partials](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#partials) so they can be found easily. You shouldn't need to edit these as they are part of the animate.css library.\n\nModules are arranged by the following animation types;\n\n| Animation Types   |\n|-------------------|\n| attention-seekers |\n| bounce-enter      |\n| bounce-exit       |\n| fade-enter        |\n| fade-exit         |\n| flippers          |\n| lightspeed        |\n| rotate-enter      |\n| rotate-exit       |\n| special           |\n\n\n##### Helpers\n\n**Base Styles**\nThe `helpers/_base.scss` file contains the main `.animate` css rules for animate-sass to work.\n\n**Mixins**\nThere are a couple of [Sass mixins](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins) defined in `helpers/_mixins.scss` that some of the modules use to generate the necessary compiled css.\n\n**Settings**\nThe `helpers/_settings.scss` file defines a range of default [Sass variables](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variables_) which are used by some of the animation modules. You can override the defaults in your own settings or style sass file(s).\n\n\n##### Animation Module loading\nThe settings file also sets all animation modules to false (nothing gets loaded).\nTo include an animation module in your project, simply override the `$use-[moduleName]` variable in your own settings file to true.\n\n**By only choosing the animation modules you need, you're keeping the compiled css at it's leanest!**\n\nEg:\n```scss\n// These animation modules will be included in output css\n$use-fadeIn: true;\n$use-fadeOut: true;\n```\n\n\n### Usage\n\nTo use `animate.scss` in your project, you will need to have Sass installed. [Visit the Sass site](http://sass-lang.com/) to find out how to do this.\n\nOnce Sass has been installed, you can download or clone this repo into your project and import `animate.scss` into your main Sass stylesheet.\n\nEg: inside `css/style.scss`\n```scss\n@import \"[path-to-node_modules-or-bower_components]/animate-sass/animate\";\n```\n\nChoose which modules you want to use in you project by overriding the variables set in the `helpers/_settings.scss` file in your own settings or variables file.\n\nEg: inside `_vars.scss`\n```scss\n...\n// These override the default vars inside animate-sass/helpers/_settings.scss\n$use-fadeIn: true;\n$use-fadeOut: true;\n...\n```\n\nEg: inside `css/style.scss`\n```scss\n@import \"vars\"; // project's Sass vars file\n@import \"[path-to-node_modules-or-bower_components]/animate-sass/animate\";\n```\n\nFinally in your markup, simply add the class `animated` to an element, along with any of the animation class names.\n\n**You may also want to include the class infinite for an infinite loop.**\n\n```html\n    \u003cdiv class=\"animated fadeIn\"\u003e\n    \t\u003cp\u003eWatch me fade in!\u003c/p\u003e\n    \u003c/div\u003e\n```\n\nThat's it! You've got a CSS animated element. Super!\n\n\n### License\n\nAnimate.scss is licensed under the MIT license. [http://opensource.org/licenses/MIT](http://opensource.org/licenses/MIT)\n\n\n### Contributing\n\nPull requests are where it's at!\n\nApologies in advance for the slow action on pull requests and issues. When submitting your pull request please make sure you match the naming convention (camelCase, categorised [fades, bounces, etc]).\n\n\n### Learn more\n\nYou can [check out Dan Eden's original animate.css here](http://daneden.me/animate). See working examples as well as how to use with javascript or creating custom css classes\n\n\n### Change log\n\nSee [Changelog](CHANGELOG.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftgdev%2Fanimate-sass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftgdev%2Fanimate-sass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftgdev%2Fanimate-sass/lists"}