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. `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 ## Installation
To install via Bower, simply do the following: Install via npm:
```bash
$ bower install animate.css --save
```
or you can install via npm:
```bash ```bash
$ npm install animate.css --save $ npm install animate.css --save
``` ```
or you can install via yarn: or yarn:
```bash ```bash
$ yarn add animate.css $ 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 ```html
<head> <head>
@ -35,37 +30,18 @@ $ yarn add animate.css
</head> </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 ```html
<head> <head>
<link rel="stylesheet" <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
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">
</head> </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 ### Animations
<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>
```
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. 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:
3. Finally you need to add one of the following classes:
| Class Name | | | | | Class Name | | | |
| ----------------- | ------------------ | ------------------- | -------------------- | | ----------------- | ------------------ | ------------------- | -------------------- |
@ -98,25 +74,19 @@ Full example:
[Check out all the animations here!](https://daneden.github.io/animate.css/) [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! ```css
.yourElement {
```html animation-duration: 3s;
<head> animation-delay: 2s;
<link rel="stylesheet" href="animate.min.css"> animation-iteration-count: infinite;
</head> }
``` ```
or use the version hosted by [CDNJS](https://cdnjs.com/libraries/animate.css) ## Usage with jQuery
```html You can do a whole bunch of other stuff with animate.css when you combine it with jQuery. A simple example:
<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:
```javascript ```javascript
$('#yourElement').addClass('animated bounceOutLeft'); $('#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/). **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 ```javascript
$.fn.extend({ $.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 ### Delay Class
.yourElement {
animation-duration: 3s;
animation-delay: 2s;
animation-iteration-count: infinite;
}
```
_Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, etc)_ It's possible to add delays directly on the element's class attribute, just like this:
## Define _Delay_ and _Speed_ using Class
#### Delay Class
You can also add delays directly on the element's class attribute, just like this:
```html ```html
<div class="animated bounce delay-2s">Example</div> <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-4s` | `4s` |
| `delay-5s` | `5s` | | `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 ```html
<div class="animated bounce faster">Example</div> <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` | | `fast` | `800ms` |
| `faster` | `500ms` | | `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 ## 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 ```sh
$ cd path/to/animate.css/ $ cd path/to/animate.css/
@ -278,4 +236,4 @@ Animate.css is licensed under the MIT license. (http://opensource.org/licenses/M
## Contributing ## 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**.