Skip to content

Commit ac91625

Browse files
danedendaneden
committed
Merge pull request #283 from antonellaclavero/master
Add basic example to README
2 parents 87e53b5 + 7645a7a commit ac91625

1 file changed

Lines changed: 92 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,98 @@
33

44
`animate.css` is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
55

6+
##Basic Usage
7+
1. Include the stylesheet on your document's `<head>`
8+
9+
```html
10+
<head>
11+
<link rel="stylesheet" href="animate.min.css">
12+
</head>
13+
```
14+
2. Add the class `animated` to the element you want to animate.
15+
You may also want to include the class `infinite` for an infinite loop.
16+
17+
3. Finally to need to add one of the following classes:
18+
19+
* `bounce`
20+
* `flash`
21+
* `pulse`
22+
* `rubberBand`
23+
* `shake`
24+
* `swing`
25+
* `tada`
26+
* `wobble`
27+
* `bounceIn`
28+
* `bounceInDown`
29+
* `bounceInLeft`
30+
* `bounceInRight`
31+
* `bounceInUp`
32+
* `bounceOut`
33+
* `bounceOutDown`
34+
* `bounceOutLeft`
35+
* `bounceOutRight`
36+
* `bounceOutUp`
37+
* `fadeIn`
38+
* `fadeInDown`
39+
* `fadeInDownBig`
40+
* `fadeInLeft`
41+
* `fadeInLeftBig`
42+
* `fadeInRight`
43+
* `fadeInRightBig`
44+
* `fadeInUp`
45+
* `fadeInUpBig`
46+
* `fadeOut`
47+
* `fadeOutDown`
48+
* `fadeOutDownBig`
49+
* `fadeOutLeft`
50+
* `fadeOutLeftBig`
51+
* `fadeOutRight`
52+
* `fadeOutRightBig`
53+
* `fadeOutUp`
54+
* `fadeOutUpBig`
55+
* `flipInX`
56+
* `flipInY`
57+
* `flipOutX`
58+
* `flipOutY`
59+
* `lightSpeedIn`
60+
* `lightSpeedOut`
61+
* `rotateIn`
62+
* `rotateInDownLeft`
63+
* `rotateInDownRight`
64+
* `rotateInUpLeft`
65+
* `rotateInUpRight`
66+
* `rotateOut`
67+
* `rotateOutDownLeft`
68+
* `rotateOutDownRight`
69+
* `rotateOutUpLeft`
70+
* `rotateOutUpRight`
71+
* `hinge`
72+
* `rollIn`
73+
* `rollOut`
74+
* `zoomIn`
75+
* `zoomInDown`
76+
* `zoomInLeft`
77+
* `zoomInRight`
78+
* `zoomInUp`
79+
* `zoomOut`
80+
* `zoomOutDown`
81+
* `zoomOutLeft`
82+
* `zoomOutRight`
83+
* `zoomOutUp`
84+
* `slideInDown`
85+
* `slideInLeft`
86+
* `slideInRight`
87+
* `slideInUp`
88+
* `slideOutDown`
89+
* `slideOutLeft`
90+
* `slideOutRight`
91+
* `slideOutUp`
92+
93+
Full example:
94+
```html
95+
<h1 class="animated infinite bounce">Example</h1>
96+
```
97+
698
##Usage
799
To use animate.css in your website, simply drop the stylesheet into your document's `<head>`, and add the class `animated` to an element, along with any of the animation names. That's it! You've got a CSS animated element. Super!
8100

0 commit comments

Comments
 (0)