Skip to content

Commit 301b798

Browse files
eltonmesquitaeltonmesquita
committed
Merge branch 'prettier' of https://github.com/lipis/animate.css into lipis-prettier
2 parents 5bde475 + 4e45f1e commit 301b798

34 files changed

Lines changed: 366 additions & 235 deletions

‎.editorconfig‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@
22
root = true
33

44
[*]
5-
indent_style = space
5+
charset = utf-8
6+
end_of_line = lf
67
indent_size = 2
8+
indent_style = space
9+
insert_final_newline = true
10+
max_line_length = 100
711
tab_width = 2
8-
end_of_line = lf
9-
charset = utf-8
1012
trim_trailing_whitespace = true
11-
insert_final_newline = true

‎.prettierignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
animate.min.css

‎README.md‎

Lines changed: 86 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
# Animate.css [![GitHub release](https://img.shields.io/github/release/daneden/animate.css.svg)](https://github.com/daneden/animate.css/releases) [![CDNJS](https://img.shields.io/cdnjs/v/animate.css.svg)](https://cdnjs.com/libraries/animate.css) [![Build Status](https://travis-ci.org/WarenGonzaga/animate.css.svg?branch=master)](https://travis-ci.org/WarenGonzaga/animate.css) [![devDependencies Status](https://david-dm.org/WarenGonzaga/animate.css/dev-status.svg)](https://david-dm.org/WarenGonzaga/animate.css?type=dev) [![chat](https://img.shields.io/badge/chat-gitter-green.svg)](https://gitter.im/animate-css/Lobby)
2-
*Just-add-water CSS animation*
2+
3+
_Just-add-water CSS animation_
34

45
`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.
56

@@ -10,87 +11,97 @@ To install via Bower, simply do the following:
1011
```bash
1112
$ bower install animate.css --save
1213
```
14+
1315
or you can install via npm:
1416

1517
```bash
1618
$ npm install animate.css --save
1719
```
1820

1921
## Basic Usage
22+
2023
1. Include the stylesheet on your document's `<head>`
2124

22-
```html
23-
<head>
24-
<link rel="stylesheet" href="animate.min.css">
25-
</head>
26-
```
27-
Instead of installing you may use the remote version (hosted by [CDNJS](https://cdnjs.com/libraries/animate.css)):
28-
```html
29-
<head>
30-
<link rel="stylesheet"
31-
href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
32-
<!-- or -->
33-
<link rel="stylesheet"
34-
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
35-
</head>
36-
```
37-
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:
38-
```html
39-
<head>
40-
<link rel="stylesheet"
41-
href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css"
42-
integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw"
43-
crossorigin="anonymous">
44-
<!-- or -->
45-
<link rel="stylesheet"
46-
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
47-
integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw"
48-
crossorigin="anonymous">
49-
</head>
50-
```
51-
2. Add the class `animated` to the element you want to animate.
52-
You may also want to include the class `infinite` for an infinite loop.
25+
```html
26+
<head>
27+
<link rel="stylesheet" href="animate.min.css">
28+
</head>
29+
```
30+
31+
Instead of installing you may use the remote version (hosted by [CDNJS](https://cdnjs.com/libraries/animate.css)):
32+
33+
```html
34+
<head>
35+
<link rel="stylesheet"
36+
href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
37+
<!-- or -->
38+
<link rel="stylesheet"
39+
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
40+
</head>
41+
```
42+
43+
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:
44+
45+
```html
46+
<head>
47+
<link rel="stylesheet"
48+
href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css"
49+
integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw"
50+
crossorigin="anonymous">
51+
<!-- or -->
52+
<link rel="stylesheet"
53+
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
54+
integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw"
55+
crossorigin="anonymous">
56+
</head>
57+
```
58+
59+
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.
5360

5461
3. Finally you need to add one of the following classes:
5562

56-
| Class Name | | | |
57-
|--------------------|--------------------|--------------------|--------------------|
58-
| `bounce` |`flash` |`pulse` |`rubberBand` |
59-
| `shake` |`headShake` |`swing` |`tada` |
60-
| `wobble` |`jello` |`bounceIn` |`bounceInDown` |
61-
| `bounceInLeft` |`bounceInRight` |`bounceInUp` |`bounceOut` |
62-
| `bounceOutDown` |`bounceOutLeft` |`bounceOutRight` |`bounceOutUp` |
63-
| `fadeIn` |`fadeInDown` |`fadeInDownBig` |`fadeInLeft` |
64-
| `fadeInLeftBig` |`fadeInRight` |`fadeInRightBig` |`fadeInUp` |
65-
| `fadeInUpBig` |`fadeOut` |`fadeOutDown` |`fadeOutDownBig` |
66-
| `fadeOutLeft` |`fadeOutLeftBig` |`fadeOutRight` |`fadeOutRightBig` |
67-
| `fadeOutUp` |`fadeOutUpBig` |`flipInX` |`flipInY` |
68-
| `flipOutX` |`flipOutY` |`lightSpeedIn` |`lightSpeedOut` |
69-
| `rotateIn` |`rotateInDownLeft` |`rotateInDownRight` |`rotateInUpLeft` |
70-
| `rotateInUpRight` |`rotateOut` |`rotateOutDownLeft` |`rotateOutDownRight` |
71-
| `rotateOutUpLeft` |`rotateOutUpRight` |`hinge` |`jackInTheBox` |
72-
| `rollIn` |`rollOut` |`zoomIn` |`zoomInDown` |
73-
| `zoomInLeft` |`zoomInRight` |`zoomInUp` |`zoomOut` |
74-
| `zoomOutDown` |`zoomOutLeft` |`zoomOutRight` |`zoomOutUp` |
75-
| `slideInDown` |`slideInLeft` |`slideInRight` |`slideInUp` |
76-
| `slideOutDown` |`slideOutLeft` |`slideOutRight` |`slideOutUp` |
63+
| Class Name | | | |
64+
| ----------------- | ------------------ | ------------------- | -------------------- |
65+
| `bounce` | `flash` | `pulse` | `rubberBand` |
66+
| `shake` | `headShake` | `swing` | `tada` |
67+
| `wobble` | `jello` | `bounceIn` | `bounceInDown` |
68+
| `bounceInLeft` | `bounceInRight` | `bounceInUp` | `bounceOut` |
69+
| `bounceOutDown` | `bounceOutLeft` | `bounceOutRight` | `bounceOutUp` |
70+
| `fadeIn` | `fadeInDown` | `fadeInDownBig` | `fadeInLeft` |
71+
| `fadeInLeftBig` | `fadeInRight` | `fadeInRightBig` | `fadeInUp` |
72+
| `fadeInUpBig` | `fadeOut` | `fadeOutDown` | `fadeOutDownBig` |
73+
| `fadeOutLeft` | `fadeOutLeftBig` | `fadeOutRight` | `fadeOutRightBig` |
74+
| `fadeOutUp` | `fadeOutUpBig` | `flipInX` | `flipInY` |
75+
| `flipOutX` | `flipOutY` | `lightSpeedIn` | `lightSpeedOut` |
76+
| `rotateIn` | `rotateInDownLeft` | `rotateInDownRight` | `rotateInUpLeft` |
77+
| `rotateInUpRight` | `rotateOut` | `rotateOutDownLeft` | `rotateOutDownRight` |
78+
| `rotateOutUpLeft` | `rotateOutUpRight` | `hinge` | `jackInTheBox` |
79+
| `rollIn` | `rollOut` | `zoomIn` | `zoomInDown` |
80+
| `zoomInLeft` | `zoomInRight` | `zoomInUp` | `zoomOut` |
81+
| `zoomOutDown` | `zoomOutLeft` | `zoomOutRight` | `zoomOutUp` |
82+
| `slideInDown` | `slideInLeft` | `slideInRight` | `slideInUp` |
83+
| `slideOutDown` | `slideOutLeft` | `slideOutRight` | `slideOutUp` |
7784

7885
Full example:
86+
7987
```html
8088
<h1 class="animated infinite bounce">Example</h1>
8189
```
8290

8391
[Check out all the animations here!](https://daneden.github.io/animate.css/)
8492

8593
## Usage
94+
8695
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!
8796

8897
```html
8998
<head>
9099
<link rel="stylesheet" href="animate.min.css">
91100
</head>
92101
```
102+
93103
or use the version hosted by [CDNJS](https://cdnjs.com/libraries/animate.css)
104+
94105
```html
95106
<head>
96107
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
@@ -112,36 +123,40 @@ http://api.jquery.com/one/
112123
-->
113124

114125
```javascript
115-
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
126+
$('#yourElement').one(
127+
'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
128+
doSomething,
129+
);
116130
```
117131

118132
[View a video tutorial](https://www.youtube.com/watch?v=CBQGl6zokMs) on how to use Animate.css with jQuery here.
119133

120-
**Note:** `jQuery.one()` is used when you want to execute the event handler at most *once*. More information [here](http://api.jquery.com/one/).
134+
**Note:** `jQuery.one()` is used when you want to execute the event handler at most _once_. More information [here](http://api.jquery.com/one/).
121135

122136
You can also extend jQuery to add a function that does it all for you:
123137

124138
```javascript
125139
$.fn.extend({
126-
animateCss: function (animationName, callback) {
127-
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
128-
this.addClass('animated ' + animationName).one(animationEnd, function() {
129-
$(this).removeClass('animated ' + animationName);
130-
if (callback) {
131-
callback();
132-
}
133-
});
134-
return this;
135-
}
140+
animateCss: function(animationName, callback) {
141+
var animationEnd =
142+
'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
143+
this.addClass('animated ' + animationName).one(animationEnd, function() {
144+
$(this).removeClass('animated ' + animationName);
145+
if (callback) {
146+
callback();
147+
}
148+
});
149+
return this;
150+
},
136151
});
137152
```
138153

139154
And use it like this:
140155

141156
```javascript
142157
$('#yourElement').animateCss('bounce');
143-
or
144-
$('#yourElement').animateCss('bounce', function () {
158+
or;
159+
$('#yourElement').animateCss('bounce', function() {
145160
// Do somthing after animation
146161
});
147162
```
@@ -156,9 +171,10 @@ You can change the duration of your animations, add a delay or change the number
156171
}
157172
```
158173

159-
*Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, etc)*
174+
_Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, etc)_
160175

161176
## Custom Builds
177+
162178
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:
163179

164180
```sh
@@ -183,7 +199,9 @@ Next, run `gulp` to compile your custom builds. For example, if you want only so
183199
```
184200

185201
## License
202+
186203
Animate.css is licensed under the MIT license. (http://opensource.org/licenses/MIT)
187204

188205
## Contributing
206+
189207
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.

‎animate-config.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
{
2-
32
"attention_seekers": {
43
"bounce": true,
54
"flash": true,

0 commit comments

Comments
 (0)