Robot
/
animate.css
mirror of https://github.com/animate-css/animate.css.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Cleaning up the Readme file (#872) 

* Cleaning up the Readme file

* Removed note about CSS prefixes
This commit is contained in:
Elton Mesquita 2018-10-17 17:01:51 -03:00 committed by Daniel Eden
parent 97000ac270
commit 559b9105ab
1 changed files with 28 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
README.md
View File

@ -4,30 +4,25 @@ _Just-add-water CSS animation_
`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.
## Installation
To install via Bower, simply do the following:
```bash
$ bower install animate.css --save
```
or you can install via npm:
Install via npm:
```bash
$ npm install animate.css --save
```
or you can install via yarn:
or yarn:
```bash
$ yarn add animate.css
```
## Basic Usage
## Usage
1. Include the stylesheet on your document's `<head>`
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!
```html
<head>
@ -35,37 +30,18 @@ $ yarn add animate.css
</head>
```
Instead of installing you may use the remote version (hosted by [CDNJS](https://cdnjs.com/libraries/animate.css)):
or use a CDN hosted version by [CDNJS](https://cdnjs.com/libraries/animate.css)
```html
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
<!-- or -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>
```
You may [generate a SRI hash](https://www.srihash.org/) of that particular version and then use it to ensure the file's integrity; also you can make anonymous requests to CDN by setting the corresponding [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) attribute:
```html
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css"
integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw"
crossorigin="anonymous">
<!-- or -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw"
crossorigin="anonymous">
</head>
```
### Animations
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 you need to add one of the following classes:
To animate an element, add the class `animated` to an element. You can include the class `infinite` for an infinite loop. Finally you need to add one of the following classes to the element:
| Class Name | | | |
| ----------------- | ------------------ | ------------------- | -------------------- |
@ -98,25 +74,19 @@ Full example:
[Check out all the animations here!](https://daneden.github.io/animate.css/)
## Usage
It's possible to change the duration of your animations, add a delay or change the number of times that it plays:
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!
```html
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
```css
.yourElement {
animation-duration: 3s;
animation-delay: 2s;
animation-iteration-count: infinite;
}
```
or use the version hosted by [CDNJS](https://cdnjs.com/libraries/animate.css)
## Usage with jQuery
```html
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
```
You can do a whole bunch of other stuff with animate.css when you combine it with jQuery or add your own CSS rules. Dynamically add animations using jQuery with ease:
You can do a whole bunch of other stuff with animate.css when you combine it with jQuery. A simple example:
```javascript
$('#yourElement').addClass('animated bounceOutLeft');
@ -154,7 +124,7 @@ $('#yourElement').one(animationEnd, doSomething);
**Note:** `jQuery.one()` is used when you want to execute the event handler at most _once_. More information [here](http://api.jquery.com/one/).
You can also extend jQuery to add a function that does it all for you:
It's possible to extend jQuery and add a function that does it all for you:
```javascript
$.fn.extend({
@ -195,23 +165,11 @@ $('#yourElement').animateCss('bounce', function() {
});
```
You can change the duration of your animations, add a delay or change the number of times that it plays:
## Setting _Delay_ and _Speed_
```css
.yourElement {
animation-duration: 3s;
animation-delay: 2s;
animation-iteration-count: infinite;
}
```
### Delay Class
_Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, etc)_
## Define _Delay_ and _Speed_ using Class
#### Delay Class
You can also add delays directly on the element's class attribute, just like this:
It's possible to add delays directly on the element's class attribute, just like this:
```html
<div class="animated bounce delay-2s">Example</div>
@ -224,11 +182,11 @@ You can also add delays directly on the element's class attribute, just like thi
| `delay-4s` | `4s` |
| `delay-5s` | `5s` |
> _**Note**: The default delays are from 1 second to 5 seconds only. If you want to add customized delays, you can add it directly to your css_
> _**Note**: The default delays are from 1 second to 5 seconds only. If you need custom delays, add it directly to your own CSS code._
#### Slow, Slower, Fast, and Faster Class
### Slow, Slower, Fast, and Faster Class
You can control the speed of the animation by adding these classes, as a sample below:
It's possible to control the speed of the animation by adding these classes, as a sample below:
```html
<div class="animated bounce faster">Example</div>
@ -241,11 +199,11 @@ You can control the speed of the animation by adding these classes, as a sample
| `fast` | `800ms` |
| `faster` | `500ms` |
> _**Note**: The default speed is `1s` which is you don't need to put any class. If you want to add a custom duration, you can add it directly to your css instead_
> _**Note**: The `animated` class has a default speed of `1s`. If you need custom duration, add it directly to your own CSS code._
## Custom Builds
Animate.css is powered by [gulp.js](http://gulpjs.com/), and you can create custom builds pretty easily. First of all, you’ll need Gulp and all other dependencies:
Animate.css is powered by [gulp.js](http://gulpjs.com/), which means you can create custom builds pretty easily. First of all, you’ll need Gulp and all other dependencies:
```sh
$ cd path/to/animate.css/
@ -278,4 +236,4 @@ Animate.css is licensed under the MIT license. (http://opensource.org/licenses/M
## Contributing
Pull requests are the way to go here. I apologise in advance for the slow action on pull requests and issues. I only have two rules for submitting a pull request: match the naming convention (camelCase, categorised [fades, bounces, etc]) and let us see a demo of submitted animations in a [pen](http://codepen.io). That last one is important.
Pull requests are the way to go here. We only have two rules for submitting a pull request: match the naming convention (camelCase, categorised [fades, bounces, etc]) and let us see a demo of submitted animations in a [pen](http://codepen.io). That **last one is important**.