animate.css/README.md

#Animate.css
*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.

##Usage
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>
```

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
$('#yourElement').addClass('animated bounceOutLeft');
```

You can also detect when an animation ends:

<!--
Before you make changes to this file, you should know that $('#yourElement').one() is *NOT A TYPO*

http://api.jquery.com/one/
-->

```javascript
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend 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 change the duration of your animations, add a delay or change the number of times that it plays:

```css
#yourElement {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}
```

*Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, etc)*

## Custom Builds
Animate.css is powered by [Grunt](http://gruntjs.com), and you can create custom builds pretty easily. First of all, you’ll need Grunt and all other dependencies:

```sh
$ cd path/to/animate.css/
$ sudo npm install
```

Next, run `grunt watch` to watch for changes and compile your custom builds. For example, if you want only some of the the “attention seekers”, simply edit the `animate-config.json` file to select only the animations you want to use.

```javascript
"attention_seekers": {
  "bounce": true,
  "flash": false,
  "pulse": false,
  "shake": true,
  "swing": true,
  "tada": true,
  "wobble": true
}
```

## License
Animate.css is licensed under the MIT license. (http://opensource.org/licenses/MIT)

## 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.
-												New readme

											
										
										
											2011-12-14 11:14:22 +01:00
+								#Animate.css
 								*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.
 								##Usage
 								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!
-												Big update. Better file organisation, prefix dropping, workflow improvements.

											
										
										
											2013-11-12 00:32:40 +01:00
+								```html
 								<head>
-												converted all the tabs into spaces

and fixed typo in the previous commit
at source/attention_seekers/swing.css

											
										
										
											2014-02-23 22:56:08 +01:00
+								  <link rel="stylesheet" href="animate.min.css">
-												Big update. Better file organisation, prefix dropping, workflow improvements.

											
										
										
											2013-11-12 00:32:40 +01:00
+								</head>
 								```
-												New readme

											
										
										
											2011-12-14 11:14:22 +01:00
+								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:
-												changes syntax highlighting code to javascript

jquery is not detected in syntax highlighting
											
										
										
											2012-09-13 20:23:26 +02:00
+								```javascript
-												New readme

											
										
										
											2011-12-14 11:14:22 +01:00
+								$('#yourElement').addClass('animated bounceOutLeft');
 								```
-												Update Readme with extra jQuery info, build info

											
										
										
											2013-11-23 22:47:23 +01:00
+								You can also detect when an animation ends:
-												NOT A TYPO

											
										
										
											2014-02-25 16:48:53 +01:00
+								<!--
 								Before you make changes to this file, you should know that $('#yourElement').one() is *NOT A TYPO*
 								http://api.jquery.com/one/
 								-->
-												Update Readme with extra jQuery info, build info

											
										
										
											2013-11-23 22:47:23 +01:00
+								```javascript
-												removed undesired function invocation parenthesis

											
										
										
											2014-03-07 18:40:08 +01:00
+								$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
-												Update Readme with extra jQuery info, build info

											
										
										
											2013-11-23 22:47:23 +01:00
+								```
-												Fixed wrong format of the function's caption in readme

											
										
										
											2014-09-03 15:46:18 +02:00
+								**Note:** `jQuery.one()` is used when you want to execute the event handler at most *once*. More information [here](http://api.jquery.com/one/).
-												add message to deter uncessary issues about one

											
										
										
											2014-04-06 21:00:20 +02:00
-												Update Readme with extra jQuery info, build info

											
										
										
											2013-11-23 22:47:23 +01:00
+								You can change the duration of your animations, add a delay or change the number of times that it plays:
-												New readme

											
										
										
											2011-12-14 11:14:22 +01:00
-												Update syntax highlighting for Readme
											
										
										
											2012-09-13 17:43:41 +02:00
+								```css
-												Fix the code block (I hope)
											
										
										
											2011-12-21 09:41:10 +01:00
+								#yourElement {
-												converted all the tabs into spaces

and fixed typo in the previous commit
at source/attention_seekers/swing.css

											
										
										
											2014-02-23 22:56:08 +01:00
+								  -vendor-animation-duration: 3s;
 								  -vendor-animation-delay: 2s;
 								  -vendor-animation-iteration-count: infinite;
-												New readme

											
										
										
											2011-12-14 11:14:22 +01:00
+								}
 								```
-												Update Readme with extra jQuery info, build info

											
										
										
											2013-11-23 22:47:23 +01:00
+								*Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, etc)*
-												New readme

											
										
										
											2011-12-14 11:14:22 +01:00
-												Big update. Better file organisation, prefix dropping, workflow improvements.

											
										
										
											2013-11-12 00:32:40 +01:00
+								## Custom Builds
-												Update Readme with extra jQuery info, build info

											
										
										
											2013-11-23 22:47:23 +01:00
+								Animate.css is powered by [Grunt](http://gruntjs.com), and you can create custom builds pretty easily. First of all, you’ll need Grunt and all other dependencies:
-												Added a cheat sheet to the readme. Kinda silly but I found it useful. At least it's easy to copy/paste this to wherever the user wants it.
											
										
										
											2012-07-20 08:57:12 +02:00
-												sh code highlighing
											
										
										
											2014-02-04 08:51:08 +01:00
+								```sh
-												Big update. Better file organisation, prefix dropping, workflow improvements.

											
										
										
											2013-11-12 00:32:40 +01:00
+								$ cd path/to/animate.css/
 								$ sudo npm install
 								```
-												Added a cheat sheet to the readme. Kinda silly but I found it useful. At least it's easy to copy/paste this to wherever the user wants it.
											
										
										
											2012-07-20 08:57:12 +02:00
-												Switch csso out for cssmin, remove preceding period from config, update bower.json

											
										
										
											2014-02-23 20:11:43 +01:00
+								Next, run `grunt watch` to watch for changes and compile your custom builds. For example, if you want only some of the the “attention seekers”, simply edit the `animate-config.json` file to select only the animations you want to use.
-												Added a cheat sheet to the readme. Kinda silly but I found it useful. At least it's easy to copy/paste this to wherever the user wants it.
											
										
										
											2012-07-20 08:57:12 +02:00
-												Big update. Better file organisation, prefix dropping, workflow improvements.

											
										
										
											2013-11-12 00:32:40 +01:00
+								```javascript
-												Update Readme with extra jQuery info, build info

											
										
										
											2013-11-23 22:47:23 +01:00
+								"attention_seekers": {
 								  "bounce": true,
 								  "flash": false,
 								  "pulse": false,
 								  "shake": true,
 								  "swing": true,
 								  "tada": true,
 								  "wobble": true
-												Big update. Better file organisation, prefix dropping, workflow improvements.

											
										
										
											2013-11-12 00:32:40 +01:00
+								}
 								```
-												Add Ruby gem link as discussed in #56

Should add more resources to this section; perhaps even a wiki?
											
										
										
											2013-01-07 17:45:57 +01:00
-												Big update. Better file organisation, prefix dropping, workflow improvements.

											
										
										
											2013-11-12 00:32:40 +01:00
+								## License
 								Animate.css is licensed under the MIT license. (http://opensource.org/licenses/MIT)
-												Add Ruby gem link as discussed in #56

Should add more resources to this section; perhaps even a wiki?
											
										
										
											2013-01-07 17:45:57 +01:00
-												Big update. Better file organisation, prefix dropping, workflow improvements.

											
										
										
											2013-11-12 00:32:40 +01:00
+								## Contributing
-												sh code highlighing
											
										
										
											2014-02-04 08:51:08 +01:00
+								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.