Skip to content

Commit f58211f

Browse files
committed
Update README.md
1 parent 39c2b18 commit f58211f

1 file changed

Lines changed: 24 additions & 11 deletions

File tree

README.md

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -50,20 +50,23 @@ One of the advantages of using Less is that you can create functions, which are
5050

5151
```less
5252
#yourElement {
53-
.animated();
54-
.bounceOutLeft();
53+
#animator.animated(); // initialize animation
54+
#animator.bounceOutLeft(); // initialize the animation effect
55+
#animator.iterate(infinite); // repeat the animation forever
56+
#animator.delay(2s); // delay everything for 2 seconds
57+
#animator.duration(3s); // each iteration will play for 3 seconds
5558
}
5659
```
5760

5861
Which will output:
5962

6063
```css
6164
#yourElement {
62-
-webkit-animation-duration: 1s;
63-
-moz-animation-duration: 1s;
64-
-ms-animation-duration: 1s;
65-
-o-animation-duration: 1s;
66-
animation-duration: 1s;
65+
-webkit-animation-duration: 3s;
66+
-moz-animation-duration: 3s;
67+
-ms-animation-duration: 3s;
68+
-o-animation-duration: 3s;
69+
animation-duration: 3s;
6770
-webkit-animation-fill-mode: both;
6871
-moz-animation-fill-mode: both;
6972
-ms-animation-fill-mode: both;
@@ -74,20 +77,30 @@ Which will output:
7477
-ms-animation-name: bounceOutLeft;
7578
-o-animation-name: bounceOutLeft;
7679
animation-name: bounceOutLeft;
80+
-webkit-animation-iteration-count: infinite;
81+
-moz-animation-iteration-count: infinite;
82+
-ms-animation-iteration-count: infinite;
83+
-o-animation-iteration-count: infinite;
84+
animation-iteration-count: infinite;
85+
-webkit-transition-delay: 2s;
86+
-moz-transition-delay: 2s;
87+
-ms-transition-delay: 2s;
88+
-o-transition-delay: 2s;
89+
transition-delay: 2s;
7790
}
7891
```
7992

80-
And there you have it! 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.
81-
82-
##Documentation
83-
Coming soon. I promise!
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.
8494

8595
##Live Demo
8696
View the animation library in action over at http://animateforless.com/. You can find Dan Eden's original demo at http://daneden.me/animate/.
8797

8898
## License
8999
Animate.less is licensed under the MIT license. (http://opensource.org/licenses/MIT)
90100

101+
##Documentation
102+
Coming soon. I promise! Below is a cheat sheet to keep you busy.
103+
91104
##Cheat Sheet
92105

93106
####Attention Seekers

0 commit comments

Comments
 (0)