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:

```javascript
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething());
```

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>
 									<link rel="stylesheet" href="animate.min.css">
 								</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:
 								```javascript
-												Fix #127 on the right branch, dummy.

											
										
										
											2014-01-31 14:45:11 +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
+								```
 								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 {
-												New readme

											
										
										
											2011-12-14 11:14:22 +01:00
+									-vendor-animation-duration: 3s;
 									-vendor-animation-delay: 2s;
 									-vendor-animation-iteration-count: infinite;
 								}
 								```
-												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
-												Added the .json extension to .animate-config

For the sake of syntax highlighting, as the content of .animate-config is valid JSON.

											
										
										
											2013-12-25 17:51:08 +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.