From 7645a7a0486a1af7643a50e1120f957313731a11 Mon Sep 17 00:00:00 2001 From: Antonella Clavero Date: Mon, 8 Sep 2014 12:16:31 -0300 Subject: [PATCH] Add basic example to README --- README.md | 92 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 92 insertions(+) diff --git a/README.md b/README.md index e18d551..ef4397a 100644 --- 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 `` + + ```html + + + + ``` +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 +

Example

+``` + ##Usage To use animate.css in your website, simply drop the stylesheet into your document's ``, 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!