Add basic example to README

2014-09-08 12:16:31 -03:00 · 2014-09-08 12:16:31 -03:00 · 7645a7a048
parent a3cf3e6c88
commit 7645a7a048
1 changed files with 92 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -3,6 +3,98 @@

 `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.

+##Basic Usage
+1. Include the stylesheet on your document's `<head>`
+
+  ```html
+  <head>
+    <link rel="stylesheet" href="animate.min.css">
+  </head>
+  ```
+2. Add the class `animated` to the element you want to animate.
+ You may also want to include the class `infinite` for an infinite loop.
+
+3. Finally to need to add one of the following classes:
+
+  * `bounce`
+  * `flash`
+  * `pulse`
+  * `rubberBand`
+  * `shake`
+  * `swing`
+  * `tada`
+  * `wobble`
+  * `bounceIn`
+  * `bounceInDown`
+  * `bounceInLeft`
+  * `bounceInRight`
+  * `bounceInUp`
+  * `bounceOut`
+  * `bounceOutDown`
+  * `bounceOutLeft`
+  * `bounceOutRight`
+  * `bounceOutUp`
+  * `fadeIn`
+  * `fadeInDown`
+  * `fadeInDownBig`
+  * `fadeInLeft`
+  * `fadeInLeftBig`
+  * `fadeInRight`
+  * `fadeInRightBig`
+  * `fadeInUp`
+  * `fadeInUpBig`
+  * `fadeOut`
+  * `fadeOutDown`
+  * `fadeOutDownBig`
+  * `fadeOutLeft`
+  * `fadeOutLeftBig`
+  * `fadeOutRight`
+  * `fadeOutRightBig`
+  * `fadeOutUp`
+  * `fadeOutUpBig`
+  * `flipInX`
+  * `flipInY`
+  * `flipOutX`
+  * `flipOutY`
+  * `lightSpeedIn`
+  * `lightSpeedOut`
+  * `rotateIn`
+  * `rotateInDownLeft`
+  * `rotateInDownRight`
+  * `rotateInUpLeft`
+  * `rotateInUpRight`
+  * `rotateOut`
+  * `rotateOutDownLeft`
+  * `rotateOutDownRight`
+  * `rotateOutUpLeft`
+  * `rotateOutUpRight`
+  * `hinge`
+  * `rollIn`
+  * `rollOut`
+  * `zoomIn`
+  * `zoomInDown`
+  * `zoomInLeft`
+  * `zoomInRight`
+  * `zoomInUp`
+  * `zoomOut`
+  * `zoomOutDown`
+  * `zoomOutLeft`
+  * `zoomOutRight`
+  * `zoomOutUp`
+  * `slideInDown`
+  * `slideInLeft`
+  * `slideInRight`
+  * `slideInUp`
+  * `slideOutDown`
+  * `slideOutLeft`
+  * `slideOutRight`
+  * `slideOutUp`
+
+Full example:
+```html
+<h1 class="animated infinite bounce">Example</h1>
+```
+
 ##Usage
 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!