mirror of
https://github.com/animate-css/animate.css.git
synced 2024-09-28 22:11:31 +02:00
Cleaning up the Readme file (#872)
* Cleaning up the Readme file * Removed note about CSS prefixes
This commit is contained in:
parent
97000ac270
commit
559b9105ab
98
README.md
98
README.md
@ -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**.
|
||||||
|
Loading…
Reference in New Issue
Block a user