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 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, ms, o)*

## Custom Builds
Animate.css is powered by Grunt, and you can create custom builds pretty easily. First of all, you’ll need Grunt and all other dependencies:

```
$ 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 the “attention seekers”, simply delete them from the repository, or change `Gruntfile.js` to only concatenate the files you want:

```javascript
concat: {
  dist: {
    src: [
    	// _base.css required for .animated helper class
    	'source/_base.css',
    	'source/attention_seekers/*.css',
    	'source/flippers/*.css'
    ],
    dest: 'animate.css'
  }
}
```

## 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');
 								```
 								You can change the duration of your animations, add a delay or change the number of times that it plays!
-												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;
 								}
 								```
 								*Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, ms, o)*
-												Big update. Better file organisation, prefix dropping, workflow improvements.

											
										
										
											2013-11-12 00:32:40 +01:00
+								## Custom Builds
 								Animate.css is powered by Grunt, 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
-												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
-												Big update. Better file organisation, prefix dropping, workflow improvements.

											
										
										
											2013-11-12 00:32:40 +01:00
+								Next, run `grunt watch` to watch for changes and compile your custom builds. For example, if you want only the “attention seekers”, simply delete them from the repository, or change `Gruntfile.js` to only concatenate the files you want:
-												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
 								concat: {
 								  dist: {
 								    src: [
 								    	// _base.css required for .animated helper class
 								    	'source/_base.css',
 								    	'source/attention_seekers/*.css',
 								    	'source/flippers/*.css'
 								    ],
 								    dest: 'animate.css'
 								  }
 								}
 								```
-												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
 								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.