|
1 | 1 | animate.less |
2 | 2 | ============ |
3 | 3 |
|
4 | | -A Collection of ready-to-go cross-browser CSS animations that you can drop into any Less pre-processor. |
| 4 | +##Animate.less |
| 5 | +*CSS animation pack for Less.* |
| 6 | + |
| 7 | +`animate.less` is a collection of cross-browser CSS animations that you can plug right into your Less pre-processor for use in your projects. Thanks to the power of [Less](http://lesscss.org/), you can now create seriously complex animations, even without using any JavaScript or jQuery magic. |
| 8 | + |
| 9 | +##What is Less? |
| 10 | +Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable. |
| 11 | + |
| 12 | +Less runs inside Node, in the browser and inside Rhino. There are also many [3rd party tools](http://lesscss.org/usage/index.html#guis-for-less) available that allow you to compile your files and watch for changes. The latter is the way to go if you want to get up and running quickly. |
| 13 | + |
| 14 | +##Usage |
| 15 | +To use animate.less in your website, simply drop this single file into your Less pre-processor and press `compile`. The pre-processor will generate an `animate.css` stylesheet. Just drop the stylesheet into your document's `<head>`, and add the class `animated` to an element, along with any of the included animation names. That's it! You now have an CSS animated element. |
| 16 | + |
| 17 | +```html |
| 18 | +<head> |
| 19 | + <link rel="stylesheet" href="animate.css"> |
| 20 | +</head> |
| 21 | +``` |
| 22 | + |
| 23 | +You can do a whole bunch of other stuff with animate.css when you combine it with jQuery or add your own CSS rules. Dynamically add animations using jQuery with ease: |
| 24 | + |
| 25 | +```javascript |
| 26 | +$('#yourElement').addClass('animated bounceOutLeft'); |
| 27 | +``` |
| 28 | + |
| 29 | +You can also detect when an animation ends: |
| 30 | + |
| 31 | +<!-- |
| 32 | +Before you make changes to this file, you should know that $('#yourElement').one() is *NOT A TYPO* |
| 33 | +
|
| 34 | +http://api.jquery.com/one/ |
| 35 | +--> |
| 36 | + |
| 37 | +```javascript |
| 38 | +$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething); |
| 39 | +``` |
| 40 | + |
| 41 | +**Note:** `jQuery.one()` is used when you want to execute the event handler at most *once*. More information [here](http://api.jquery.com/one/). |
| 42 | + |
| 43 | +You can change the duration of your animations, add a delay or change the number of times that it plays: |
| 44 | + |
| 45 | +```css |
| 46 | +#yourElement { |
| 47 | + -vendor-animation-duration: 3s; |
| 48 | + -vendor-animation-delay: 2s; |
| 49 | + -vendor-animation-iteration-count: infinite; |
| 50 | +} |
| 51 | +``` |
| 52 | + |
| 53 | +*Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, etc)* |
| 54 | + |
| 55 | +## License |
| 56 | +Animate.less is licensed under the MIT license. (http://opensource.org/licenses/MIT) |
| 57 | + |
| 58 | +## Contributing |
| 59 | +Pull requests are the way to go here. I only have two rules for submitting a pull request: match the naming convention (camelCase, categorised [fades, bounces, etc]) and let us see a demo of submitted animations in a [pen](http://codepen.io). |
0 commit comments