Skip to content

Commit 134e6e5

Browse files
lipislipis
committed
Format files
1 parent 98956e0 commit 134e6e5

34 files changed

Lines changed: 342 additions & 233 deletions

‎.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: 81 additions & 67 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) [![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">
@@ -117,31 +128,31 @@ $('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimat
117128

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

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/).
131+
**Note:** `jQuery.one()` is used when you want to execute the event handler at most _once_. More information [here](http://api.jquery.com/one/).
121132

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

124135
```javascript
125136
$.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-
}
137+
animateCss: function(animationName, callback) {
138+
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
139+
this.addClass('animated ' + animationName).one(animationEnd, function() {
140+
$(this).removeClass('animated ' + animationName);
141+
if (callback) {
142+
callback();
143+
}
144+
});
145+
return this;
146+
},
136147
});
137148
```
138149

139150
And use it like this:
140151

141152
```javascript
142153
$('#yourElement').animateCss('bounce');
143-
or
144-
$('#yourElement').animateCss('bounce', function () {
154+
or;
155+
$('#yourElement').animateCss('bounce', function() {
145156
// Do somthing after animation
146157
});
147158
```
@@ -156,9 +167,10 @@ You can change the duration of your animations, add a delay or change the number
156167
}
157168
```
158169

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

161172
## Custom Builds
173+
162174
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:
163175

164176
```sh
@@ -183,7 +195,9 @@ Next, run `gulp` to compile your custom builds. For example, if you want only so
183195
```
184196

185197
## License
198+
186199
Animate.css is licensed under the MIT license. (http://opensource.org/licenses/MIT)
187200

188201
## Contributing
202+
189203
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)