You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+18-18Lines changed: 18 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,12 +5,12 @@ Animate.less
5
5
6
6
Originally created by [Dan Eden](https://github.com/daneden/animate.css), `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. More on this later.
7
7
8
-
##What is Less?
8
+
##What is Less?
9
9
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.
10
10
11
11
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.
12
12
13
-
##Usage
13
+
##Usage
14
14
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.
15
15
16
16
```html
@@ -45,7 +45,7 @@ You can change the duration of your animations, add a delay or change the number
45
45
46
46
*Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, etc)*
47
47
48
-
##Script-less Animations
48
+
##Script-less Animations
49
49
One of the advantages of using Less is that you can create functions, which are basically [Mixins](http://lesscss.org/features/#features-overview-feature-mixins) containing nested rules and other function calls. Animate.less contains a set of mixins that make manipulating your animations easier. For example, the above jQuery example can be written as:
50
50
51
51
```less
@@ -92,18 +92,18 @@ Which will output:
92
92
93
93
And there you have it! Phew! What a ride. The animation has been achieved without using any jQuery. Of course, this is only a tiny fraction of what can be achieved with Animate.less. Please head on over to [AnimateForLess.com](http://animateforless.com) for a full demo and to join the duscussion.
94
94
95
-
##Live Demo
95
+
##Live Demo
96
96
View the animation library in action over at http://animateforless.com/. You can find Dan Eden's original demo at http://daneden.me/animate/.
97
97
98
98
## License
99
99
Animate.less is licensed under the MIT license. (http://opensource.org/licenses/MIT)
100
100
101
-
##Documentation
101
+
##Documentation
102
102
Coming soon. I promise! Below is a cheat sheet to keep you busy.
0 commit comments