{"_id":"animate.less","_rev":"3-ddcd032f6352f645003d72e13029cb3c","name":"animate.less","description":"LESS cross-browser animation library. Ready for Twitter Bootstrap. Originally created by Dan Eden.","dist-tags":{"latest":"2.2.0"},"versions":{"2.2.0":{"name":"animate.less","version":"2.2.0","description":"LESS cross-browser animation library. Ready for Twitter Bootstrap. Originally created by Dan Eden.","repository":{"type":"git","url":"https://github.com/machito/animate.less.git"},"keywords":["less","animate","animate.css","hipster","animation","bootstrap"],"author":{"name":"machito"},"homepage":"https://github.com/machito/animate.less","devDependencies":{"less":"^2.4.0","less-plugin-clean-css":"^1.5.0"},"scripts":{"build":"lessc animate.less > animate.css && lessc --clean-css='--compatibility=ie8 --advanced' animate.less > animate.min.css"},"gitHead":"99de2e58a83c8d09cec3be3c162f830f4486dbde","bugs":{"url":"https://github.com/machito/animate.less/issues"},"_id":"animate.less@2.2.0","_shasum":"232c273e3c57a8c73f45d01063c91e04d7edb75a","_from":".","_npmVersion":"2.5.1","_nodeVersion":"0.12.0","_npmUser":{"name":"qrpike","email":"qrpike@gmail.com"},"maintainers":[{"name":"qrpike","email":"qrpike@gmail.com"}],"dist":{"shasum":"232c273e3c57a8c73f45d01063c91e04d7edb75a","tarball":"https://registry.npmjs.org/animate.less/-/animate.less-2.2.0.tgz","integrity":"sha512-e6p0jCCv7lZ44C3bq/vUNGIlxeOyqvd+sVYWr27OgsyN00eCkbBfwqIRtu9hnerRNRHK1jTyuQe1oDkeWbD0yg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHTUPbuBzzlQiQq8Ydh0sHFe4zzAATb2i0DYKBboTAtWAiBSz+C9gTAgqC9NDWmapuVb4I1QSgiXXBAayo5N70r9hQ=="}]}}},"readme":"#Animate.less\n*Cross-browser CSS3 animation library*\n\nIf you're a web hipster, and you're already using Twitter's Bootstrap like a whore, you're gonna love this.\n\n`animate.less`, originally created by [Dan Eden](https://github.com/daneden/animate.css \"Dan Eden\"), is a bunch of cool, fun, and cross-browser animations converted into LESS for you to use in your Bootstrap projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.\n\n##Usage\n###Files\n\n`animate.css` is 64kb and `animate.min.css` is 48kb.\n\n### Getting a Copy\n\nYou can use bower, npm, or [download a zip](https://github.com/machito/animate.less/archive/master.zip).\n\n#### bower\n\n```\nbower --save install animate.less\n```\n\n#### npm\n```\nnpm --save install animate.less\n```\n\n\n###Bootstrap/LESS\nTo use animate.less in your Bootstrap project, simply add the line below into `bootstrap.less`:\n\n```css\n@import \"<PATH_TO_SOURCE>/animate.less\";\n```\n\n###Inside your HTML\nAdd the class `animated` to an element, along with any of the animation names. That's it! You've got a CSS animated element. Super!\n\nFor example:\n\n```html\n<h1 id=\"logo\" class=\"animated fadeIn\">...</h1>\n```\n\n###Inside your stylesheet\nSince we're using LESS, we can utilize our animation library by adding `.animated` and any of the many animation names as classes.\n\nFor example:\n\n```css\nh1#logo {\n  float: left;\n  font-family: 'Cubano', sans-serif;\n  font-weight: normal;\n  font-size: 3.5em;\n  text-transform: uppercase;\n  padding: 0;\n  margin: 0;\n  .animated; // Initiate animation library\n  .bounce; // Initiate bounce effect\n}\n```\n\n*Note: if you're having issues, try re-compiling `bootstrap.less` for changes to take effect.*\n\n###Extending with jQuery\nYou can add more functionality to your animations with jQuery such as below:\n\n```javascript\n$(\"#logo\").addClass('animated bounceOutLeft');\n```\n\nWe can also bind these classes with events or triggers like below:\n\n```javascript\n$(document).ready(function(){\n\t$(\"#logo\").click(function() {\n\t\t$(\"this\").addClass(\"animated bounceOutLeft\");\n\t});\n});\n```\n###Editing an animation effect\nYou can 1) change the duration of your animations with the LESS varible `@animationLessTime`, 2) extend the delay, or 3) change the number of times that it plays. If you do edit an animation effect, make sure you change them cross-browser.\n\n```css\n#logo {\n\t-vendor-animation-duration: 3s; // Change to Webkit, Mozilla, Opera, etc.\n\t-vendor-animation-delay: 2s;\n\t-vendor-animation-iteration-count: infinite;\n\tanimation-duration 3s; // Default\n\tanimation-delay: 2s; // Default\n \tanimation-iteration-count: infinite; // Default\n}\n```\n\n*Note: be sure to replace \"vendor\" in the CSS with the applicable vendor prefixes (webkit, moz, ms, o).*\n\n*Note: Safari in Mountain Lion (OS X 10.8) has a display glitch with the Flippers. They may not appear at all until the animation is completed, or the page may have other artifacting. One fix is to add overflow: hidden to the parent div.*\n\n### Build a custom library\n\nHead over to http://daneden.me/animate/build/ to select which animations you need. This will download a .css file, so just rename it to .less and use as described above.\n\nYou can also pick & choose which LESS files in your own LESS, just set the variables & import stuff (see animate.less for example):\n\n```less\n@animationLessTime: 0.5s;\n@animationLessLocation: '../node_modules/animate.less/source';\n\n@import \"@{animationLessLocation}/animated.less\";\n\n@import \"@{animationLessLocation}/bounce.less\";\n@import \"@{animationLessLocation}/bounceIn.less\";\n@import \"@{animationLessLocation}/bounceInDown.less\";\n@import \"@{animationLessLocation}/bounceInLeft.less\";\n@import \"@{animationLessLocation}/bounceInRight.less\";\n@import \"@{animationLessLocation}/bounceInUp.less\";\n@import \"@{animationLessLocation}/bounceOut.less\";\n@import \"@{animationLessLocation}/bounceOutDown.less\";\n@import \"@{animationLessLocation}/bounceOutLeft.less\";\n@import \"@{animationLessLocation}/bounceOutRight.less\";\n@import \"@{animationLessLocation}/bounceOutUp.less\";\n```\n\n\n###Live demo\n\nView the animation library in action over at http://daneden.me/animate/.\n\n##Browser Support\n\nSince we're using CSS3 here, we're limited to only modern browsers like Chrome, Safari, Mozilla, and Opera.\n\n##License\n\nAnimate.css is licensed under the &#9786; license. (http://licence.visualidiot.com/)\n\n##Future Development\n\nI'll shortly be compiling an `animation-library.less` which will allow you to pick and choose which effects you need in your project.\n\nDown the line, IE8/9 support hopefully.\n\n##Learn more\n\nYou can learn more about animate.css over at http://daneden.me/animate and Twitter Bootstrap over at http://getbootstrap.com/\n\n##Cheat Sheet\n\n####Attention seekers:\nflash\nbounce\nshake\ntada\nswing\nwobble\nwiggle\npulse\n\n####Flippers (currently Webkit, Firefox, &amp; IE10 only):\nflip\nflipInX\nflipOutX\nflipInY\nflipOutY\n\n####Fading entrances:\nfadeIn\nfadeInUp\nfadeInDown\nfadeInLeft\nfadeInRight\nfadeInUpBig\nfadeInDownBig\nfadeInLeftBig\nfadeInRightBig\n\n####Fading exits:\nfadeOut\nfadeOutUp\nfadeOutDown\nfadeOutLeft\nfadeOutRight\nfadeOutUpBig\nfadeOutDownBig\nfadeOutLeftBig\nfadeOutRightBig\n\n####Bouncing entrances:\nbounceIn\nbounceInDown\nbounceInUp\nbounceInLeft\nbounceInRight\n\n####Bouncing exits:\nbounceOut\nbounceOutDown\nbounceOutUp\nbounceOutLeft\nbounceOutRight\n\n####Rotating entrances:\nrotateIn\nrotateInDownLeft\nrotateInDownRight\nrotateInUpLeft\nrotateInUpRight\n\n####Rotating exits:\nrotateOut\nrotateOutDownLeft\nrotateOutDownRight\nrotateOutUpLeft\nrotateOutUpRight\n\n####Lightspeed:\nlightSpeedIn\nlightSpeedOut\n\n####Specials:\nhinge\nrollIn\nrollOut\n\n## Development\n\n-  Type `npm install` to install the dev tools.\n-  Type `npm run build` to build the CSS files. Check out `package.json` to see how to add these tools to your own LESS-based project.\n","maintainers":[{"name":"qrpike","email":"qrpike@gmail.com"}],"time":{"modified":"2022-06-13T03:03:58.855Z","created":"2015-06-13T11:31:36.827Z","2.2.0":"2015-06-13T11:31:36.827Z"},"homepage":"https://github.com/machito/animate.less","keywords":["less","animate","animate.css","hipster","animation","bootstrap"],"repository":{"type":"git","url":"https://github.com/machito/animate.less.git"},"author":{"name":"machito"},"bugs":{"url":"https://github.com/machito/animate.less/issues"},"readmeFilename":"README.md"}