diff --git a/README.md b/README.md index fca5230..05991eb 100644 --- a/README.md +++ b/README.md @@ -4,30 +4,25 @@ _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. + ## Installation -To install via Bower, simply do the following: - -```bash -$ bower install animate.css --save -``` - -or you can install via npm: +Install via npm: ```bash $ npm install animate.css --save ``` -or you can install via yarn: +or yarn: ```bash $ yarn add animate.css ``` -## Basic Usage +## Usage -1. Include the stylesheet on your document's `
` +To use animate.css in your website, simply drop the stylesheet into your document's ``, 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 @@ -35,37 +30,18 @@ $ yarn add animate.css ``` -Instead of installing you may use the remote version (hosted by [CDNJS](https://cdnjs.com/libraries/animate.css)): +or use a CDN hosted version by [CDNJS](https://cdnjs.com/libraries/animate.css) ```html - - - + ``` -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: -```html - - - - - -``` +### Animations -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. - -3. Finally you need to add one of the following classes: +To animate an element, add the class `animated` to an element. You can include the class `infinite` for an infinite loop. Finally you need to add one of the following classes to the element: | Class Name | | | | | ----------------- | ------------------ | ------------------- | -------------------- | @@ -98,25 +74,19 @@ Full example: [Check out all the animations here!](https://daneden.github.io/animate.css/) -## Usage +It's possible to change the duration of your animations, add a delay or change the number of times that it plays: -To use animate.css in your website, simply drop the stylesheet into your document's ``, 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 - - - +```css +.yourElement { + animation-duration: 3s; + animation-delay: 2s; + animation-iteration-count: infinite; +} ``` -or use the version hosted by [CDNJS](https://cdnjs.com/libraries/animate.css) +## Usage with jQuery -```html - - - -``` - -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: +You can do a whole bunch of other stuff with animate.css when you combine it with jQuery. A simple example: ```javascript $('#yourElement').addClass('animated bounceOutLeft'); @@ -154,7 +124,7 @@ $('#yourElement').one(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 also extend jQuery to add a function that does it all for you: +It's possible to extend jQuery and add a function that does it all for you: ```javascript $.fn.extend({ @@ -195,23 +165,11 @@ $('#yourElement').animateCss('bounce', function() { }); ``` -You can change the duration of your animations, add a delay or change the number of times that it plays: +## Setting _Delay_ and _Speed_ -```css -.yourElement { - animation-duration: 3s; - animation-delay: 2s; - animation-iteration-count: infinite; -} -``` +### Delay Class -_Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, etc)_ - -## Define _Delay_ and _Speed_ using Class - -#### Delay Class - -You can also add delays directly on the element's class attribute, just like this: +It's possible to add delays directly on the element's class attribute, just like this: ```html