mirror of
https://github.com/animate-css/animate.css.git
synced 2024-10-01 15:31:30 +02:00
Add basic example to README
This commit is contained in:
parent
a3cf3e6c88
commit
7645a7a048
92
README.md
92
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.
|
`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
|
##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!
|
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!
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user