Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
animate-css-webpack
Advanced tools
animate-css-webpack - npm Package Compare versions
Comparing version 3.5.4 to 3.5.5
| { | ||
| "name": "animate-css-webpack", | ||
| "version": "3.5.4", | ||
| "version": "3.5.5", | ||
| "main": "index.js", | ||
@@ -15,3 +15,2 @@ "loader": "index.loader.js", | ||
| "license": "MIT", | ||
| "style": "./animate.css", | ||
| "dependencies": { | ||
@@ -18,0 +17,0 @@ "css-loader": "~0.17.0", |
290
README.md
@@ -1,189 +0,149 @@ | ||
| #Animate.css | ||
| *Just-add-water CSS animation* | ||
| #animate-css-webpack | ||
| `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. | ||
| Webpack loader for animate.css | ||
| ##Basic Usage | ||
| 1. Include the stylesheet on your document's `<head>` | ||
| ```html | ||
| <head> | ||
| <link rel="stylesheet" href="animate.min.css"> | ||
| </head> | ||
| ``` | ||
| 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. | ||
| you want to keep your css small this is the way to go | ||
| 3. Finally you need to add one of the following classes: | ||
| * `bounce` | ||
| * `flash` | ||
| * `pulse` | ||
| * `rubberBand` | ||
| * `shake` | ||
| * `headShake` | ||
| * `swing` | ||
| * `tada` | ||
| * `wobble` | ||
| * `jello` | ||
| * `bounceIn` | ||
| * `bounceInDown` | ||
| * `bounceInLeft` | ||
| * `bounceInRight` | ||
| * `bounceInUp` | ||
| * `bounceOut` | ||
| * `bounceOutDown` | ||
| * `bounceOutLeft` | ||
| * `bounceOutRight` | ||
| * `bounceOutUp` | ||
| * `fadeIn` | ||
| * `fadeInDown` | ||
| * `fadeInDownBig` | ||
| * `fadeInLeft` | ||
| * `fadeInLeftBig` | ||
| * `fadeInRight` | ||
| * `fadeInRightBig` | ||
| * `fadeInUp` | ||
| * `fadeInUpBig` | ||
| * `fadeOut` | ||
| * `fadeOutDown` | ||
| * `fadeOutDownBig` | ||
| * `fadeOutLeft` | ||
| * `fadeOutLeftBig` | ||
| * `fadeOutRight` | ||
| * `fadeOutRightBig` | ||
| * `fadeOutUp` | ||
| * `fadeOutUpBig` | ||
| * `flipInX` | ||
| * `flipInY` | ||
| * `flipOutX` | ||
| * `flipOutY` | ||
| * `lightSpeedIn` | ||
| * `lightSpeedOut` | ||
| * `rotateIn` | ||
| * `rotateInDownLeft` | ||
| * `rotateInDownRight` | ||
| * `rotateInUpLeft` | ||
| * `rotateInUpRight` | ||
| * `rotateOut` | ||
| * `rotateOutDownLeft` | ||
| * `rotateOutDownRight` | ||
| * `rotateOutUpLeft` | ||
| * `rotateOutUpRight` | ||
| * `hinge` | ||
| * `rollIn` | ||
| * `rollOut` | ||
| * `zoomIn` | ||
| * `zoomInDown` | ||
| * `zoomInLeft` | ||
| * `zoomInRight` | ||
| * `zoomInUp` | ||
| * `zoomOut` | ||
| * `zoomOutDown` | ||
| * `zoomOutLeft` | ||
| * `zoomOutRight` | ||
| * `zoomOutUp` | ||
| * `slideInDown` | ||
| * `slideInLeft` | ||
| * `slideInRight` | ||
| * `slideInUp` | ||
| * `slideOutDown` | ||
| * `slideOutLeft` | ||
| * `slideOutRight` | ||
| * `slideOutUp` | ||
| create the following file in your config and in your webpack config | ||
| load it as: | ||
| Full example: | ||
| ```html | ||
| <h1 class="animated infinite bounce">Example</h1> | ||
| ``` | ||
| entry: { | ||
| 'main': [ | ||
| 'bootstrap-sass!./src/theme/bootstrap.config.js', | ||
| 'font-awesome-webpack!./src/theme/font-awesome.config.js', | ||
| 'animate-css-webpack!./src/theme/animate-css.config.js', | ||
| './src/client.js' | ||
| ] | ||
| }, | ||
| [Check out all the animations here!](https://daneden.github.io/animate.css/) | ||
| ##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'); | ||
| ``` | ||
| module.exports = { | ||
| // Default for the style loading | ||
| styleLoader: 'style-loader!css-loader', | ||
| You can also detect when an animation ends: | ||
| styles: { | ||
| <!-- | ||
| Before you make changes to this file, you should know that $('#yourElement').one() is *NOT A TYPO* | ||
| "attention_seekers": { | ||
| "bounce": true, | ||
| "flash": true, | ||
| "pulse": true, | ||
| "rubberBand": true, | ||
| "shake": true, | ||
| "headShake": true, | ||
| "swing": true, | ||
| "tada": true, | ||
| "wobble": true, | ||
| "jello": true, | ||
| }, | ||
| http://api.jquery.com/one/ | ||
| --> | ||
| "bouncing_entrances": { | ||
| "bounceIn": true, | ||
| "bounceInDown": true, | ||
| "bounceInLeft": true, | ||
| "bounceInRight": true, | ||
| "bounceInUp": true, | ||
| }, | ||
| ```javascript | ||
| $('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething); | ||
| ``` | ||
| "bouncing_exits": { | ||
| "bounceOut": true, | ||
| "bounceOutDown": true, | ||
| "bounceOutLeft": true, | ||
| "bounceOutRight": true, | ||
| "bounceOutUp": true, | ||
| }, | ||
| [View a video tutorial](https://www.youtube.com/watch?v=CBQGl6zokMs) on how to use Animate.css with jQuery here. | ||
| "fading_entrances": { | ||
| "fadeIn": true, | ||
| "fadeInDown": true, | ||
| "fadeInDownBig": true, | ||
| "fadeInLeft": true, | ||
| "fadeInLeftBig": true, | ||
| "fadeInRight": true, | ||
| "fadeInRightBig": true, | ||
| "fadeInUp": true, | ||
| "fadeInUpBig": true, | ||
| }, | ||
| **Note:** `jQuery.one()` is used when you want to execute the event handler at most *once*. More information [here](http://api.jquery.com/one/). | ||
| "fading_exits": { | ||
| "fadeOut": true, | ||
| "fadeOutDown": true, | ||
| "fadeOutDownBig": true, | ||
| "fadeOutLeft": true, | ||
| "fadeOutLeftBig": true, | ||
| "fadeOutRight": true, | ||
| "fadeOutRightBig": true, | ||
| "fadeOutUp": true, | ||
| "fadeOutUpBig": true, | ||
| }, | ||
| You can also extend jQuery to add a function that does it all for you: | ||
| "flippers": { | ||
| "flip": true, | ||
| "flipInX": true, | ||
| "flipInY": true, | ||
| "flipOutX": true, | ||
| "flipOutY": true, | ||
| }, | ||
| ```javascript | ||
| $.fn.extend({ | ||
| animateCss: function (animationName) { | ||
| var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; | ||
| $(this).addClass('animated ' + animationName).one(animationEnd, function() { | ||
| $(this).removeClass('animated ' + animationName); | ||
| }); | ||
| } | ||
| }); | ||
| ``` | ||
| "lightspeed": { | ||
| "lightSpeedIn": true, | ||
| "lightSpeedOut": true, | ||
| }, | ||
| And use it like this: | ||
| "rotating_entrances": { | ||
| "rotateIn": true, | ||
| "rotateInDownLeft": true, | ||
| "rotateInDownRight": true, | ||
| "rotateInUpLeft": true, | ||
| "rotateInUpRight": true, | ||
| }, | ||
| ```javascript | ||
| $('#yourElement').animateCss('bounce'); | ||
| ``` | ||
| "rotating_exits": { | ||
| "rotateOut": true, | ||
| "rotateOutDownLeft": true, | ||
| "rotateOutDownRight": true, | ||
| "rotateOutUpLeft": true, | ||
| "rotateOutUpRight": true, | ||
| }, | ||
| You can change the duration of your animations, add a delay or change the number of times that it plays: | ||
| "specials": { | ||
| "hinge": true, | ||
| "rollIn": true, | ||
| "rollOut": true, | ||
| }, | ||
| ```css | ||
| #yourElement { | ||
| -vendor-animation-duration: 3s; | ||
| -vendor-animation-delay: 2s; | ||
| -vendor-animation-iteration-count: infinite; | ||
| } | ||
| ``` | ||
| "zooming_entrances": { | ||
| "zoomIn": true, | ||
| "zoomInDown": true, | ||
| "zoomInLeft": true, | ||
| "zoomInRight": true, | ||
| "zoomInUp": true, | ||
| }, | ||
| *Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, etc)* | ||
| "zooming_exits": { | ||
| "zoomOut": true, | ||
| "zoomOutDown": true, | ||
| "zoomOutLeft": true, | ||
| "zoomOutRight": true, | ||
| "zoomOutUp": true, | ||
| }, | ||
| ## 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: | ||
| "sliding_entrances": { | ||
| "slideInDown": true, | ||
| "slideInLeft": true, | ||
| "slideInRight": true, | ||
| "slideInUp": true, | ||
| }, | ||
| ```sh | ||
| $ cd path/to/animate.css/ | ||
| $ sudo npm install | ||
| ``` | ||
| Webpack build | ||
| ``` | ||
| ``` | ||
| Next, run `gulp` to 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, | ||
| "headShake": true, | ||
| "swing": true, | ||
| "tada": true, | ||
| "wobble": true, | ||
| "jello":true | ||
| "sliding_exits": { | ||
| "slideOutDown": true, | ||
| "slideOutLeft": true, | ||
| "slideOutRight": true, | ||
| "slideOutUp": true, | ||
| } | ||
| } | ||
| } | ||
@@ -193,5 +153,7 @@ ``` | ||
| ## License | ||
| Animate.css is licensed under the MIT license. (http://opensource.org/licenses/MIT) | ||
| animate-css-webpack 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. | ||
| Pull requests are the way to go here. Submit a PR and I will review | ||
| once I get a chance, there are no hard guidelines for PRs just follow | ||
| some sort of a sesnible style similar to what is there. |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-15.95%
9719
- Number of lines in readme file
- decreased by-19.29%
159
No dependency changes