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
+24-11Lines changed: 24 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -50,20 +50,23 @@ One of the advantages of using Less is that you can create functions, which are
50
50
51
51
```less
52
52
#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
55
58
}
56
59
```
57
60
58
61
Which will output:
59
62
60
63
```css
61
64
#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;
67
70
-webkit-animation-fill-mode: both;
68
71
-moz-animation-fill-mode: both;
69
72
-ms-animation-fill-mode: both;
@@ -74,20 +77,30 @@ Which will output:
74
77
-ms-animation-name: bounceOutLeft;
75
78
-o-animation-name: bounceOutLeft;
76
79
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;
77
90
}
78
91
```
79
92
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.
84
94
85
95
##Live Demo
86
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/.
87
97
88
98
## License
89
99
Animate.less is licensed under the MIT license. (http://opensource.org/licenses/MIT)
90
100
101
+
##Documentation
102
+
Coming soon. I promise! Below is a cheat sheet to keep you busy.
0 commit comments