From 559b9105abc48bb9f601b1548394405baa0196f0 Mon Sep 17 00:00:00 2001 From: Elton Mesquita Date: Wed, 17 Oct 2018 17:01:51 -0300 Subject: [PATCH] Cleaning up the Readme file (#872) * Cleaning up the Readme file * Removed note about CSS prefixes --- README.md | 98 ++++++++++++++++--------------------------------------- 1 file changed, 28 insertions(+), 70 deletions(-) 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
Example
@@ -224,11 +182,11 @@ You can also add delays directly on the element's class attribute, just like thi | `delay-4s` | `4s` | | `delay-5s` | `5s` | -> _**Note**: The default delays are from 1 second to 5 seconds only. If you want to add customized delays, you can add it directly to your css_ +> _**Note**: The default delays are from 1 second to 5 seconds only. If you need custom delays, add it directly to your own CSS code._ -#### Slow, Slower, Fast, and Faster Class +### Slow, Slower, Fast, and Faster Class -You can control the speed of the animation by adding these classes, as a sample below: +It's possible to control the speed of the animation by adding these classes, as a sample below: ```html
Example
@@ -241,11 +199,11 @@ You can control the speed of the animation by adding these classes, as a sample | `fast` | `800ms` | | `faster` | `500ms` | -> _**Note**: The default speed is `1s` which is you don't need to put any class. If you want to add a custom duration, you can add it directly to your css instead_ +> _**Note**: The `animated` class has a default speed of `1s`. If you need custom duration, add it directly to your own CSS code._ ## Custom Builds -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: +Animate.css is powered by [gulp.js](http://gulpjs.com/), which means you can create custom builds pretty easily. First of all, you’ll need Gulp and all other dependencies: ```sh $ cd path/to/animate.css/ @@ -278,4 +236,4 @@ Animate.css is licensed under the MIT license. (http://opensource.org/licenses/M ## 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. +Pull requests are the way to go here. We 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**.