From 134e6e55feaf042362ce02d04856e91917bd36dd Mon Sep 17 00:00:00 2001 From: Panayiotis Lipiridis Date: Thu, 16 Nov 2017 01:20:46 +0200 Subject: [PATCH] Format files --- .prettierignore | 1 + README.md | 148 ++++++++------- animate-config.json | 1 - animate.css | 192 ++++++++++++-------- bower.json | 8 +- gulpfile.js | 31 ++-- package.json | 4 +- source/_base.css | 2 +- source/attention_seekers/bounce.css | 17 +- source/attention_seekers/flash.css | 7 +- source/attention_seekers/jello.css | 4 +- source/attention_seekers/rubberBand.css | 4 +- source/attention_seekers/shake.css | 14 +- source/attention_seekers/tada.css | 14 +- source/bouncing_entrances/bounceIn.css | 15 +- source/bouncing_entrances/bounceInDown.css | 8 +- source/bouncing_entrances/bounceInLeft.css | 8 +- source/bouncing_entrances/bounceInRight.css | 8 +- source/bouncing_entrances/bounceInUp.css | 8 +- source/bouncing_exits/bounceOut.css | 7 +- source/bouncing_exits/bounceOutDown.css | 3 +- source/bouncing_exits/bounceOutUp.css | 3 +- source/flippers/flip.css | 2 +- source/specials/hinge.css | 6 +- source/zooming_entrances/zoomIn.css | 2 +- source/zooming_entrances/zoomInDown.css | 8 +- source/zooming_entrances/zoomInLeft.css | 8 +- source/zooming_entrances/zoomInRight.css | 8 +- source/zooming_entrances/zoomInUp.css | 8 +- source/zooming_exits/zoomOut.css | 2 +- source/zooming_exits/zoomOutDown.css | 8 +- source/zooming_exits/zoomOutLeft.css | 4 +- source/zooming_exits/zoomOutRight.css | 4 +- source/zooming_exits/zoomOutUp.css | 8 +- 34 files changed, 342 insertions(+), 233 deletions(-) create mode 100644 .prettierignore diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..ccd44ca --- /dev/null +++ b/.prettierignore @@ -0,0 +1 @@ +animate.min.css \ No newline at end of file diff --git a/README.md b/README.md index e80e74c..a0a011d 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,6 @@ # Animate.css [![GitHub release](https://img.shields.io/github/release/daneden/animate.css.svg)](https://github.com/daneden/animate.css/releases) [![Build Status](https://travis-ci.org/WarenGonzaga/animate.css.svg?branch=master)](https://travis-ci.org/WarenGonzaga/animate.css) [![devDependencies Status](https://david-dm.org/WarenGonzaga/animate.css/dev-status.svg)](https://david-dm.org/WarenGonzaga/animate.css?type=dev) [![chat](https://img.shields.io/badge/chat-gitter-green.svg)](https://gitter.im/animate-css/Lobby) -*Just-add-water CSS animation* + +_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. @@ -10,6 +11,7 @@ To install via Bower, simply do the following: ```bash $ bower install animate.css --save ``` + or you can install via npm: ```bash @@ -17,65 +19,71 @@ $ npm install animate.css --save ``` ## Basic Usage + 1. Include the stylesheet on your document's `` - ```html - - - - ``` - Instead of installing you may use the remote version (hosted 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 - - - - - - ``` -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. +```html + + + +``` + +Instead of installing you may use the remote version (hosted 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 + + + + + +``` + +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: -| Class Name | | | | -|--------------------|--------------------|--------------------|--------------------| -| `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` |`jackInTheBox` | -| `rollIn` |`rollOut` |`zoomIn` |`zoomInDown` | -| `zoomInLeft` |`zoomInRight` |`zoomInUp` |`zoomOut` | -| `zoomOutDown` |`zoomOutLeft` |`zoomOutRight` |`zoomOutUp` | -| `slideInDown` |`slideInLeft` |`slideInRight` |`slideInUp` | -| `slideOutDown` |`slideOutLeft` |`slideOutRight` |`slideOutUp` | +| Class Name | | | | +| ----------------- | ------------------ | ------------------- | -------------------- | +| `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` | `jackInTheBox` | +| `rollIn` | `rollOut` | `zoomIn` | `zoomInDown` | +| `zoomInLeft` | `zoomInRight` | `zoomInUp` | `zoomOut` | +| `zoomOutDown` | `zoomOutLeft` | `zoomOutRight` | `zoomOutUp` | +| `slideInDown` | `slideInLeft` | `slideInRight` | `slideInUp` | +| `slideOutDown` | `slideOutLeft` | `slideOutRight` | `slideOutUp` | Full example: + ```html

Example

``` @@ -83,6 +91,7 @@ Full example: [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 ``, 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 @@ -90,7 +99,9 @@ To use animate.css in your website, simply drop the stylesheet into your documen ``` + or use the version hosted by [CDNJS](https://cdnjs.com/libraries/animate.css) + ```html @@ -117,22 +128,22 @@ $('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimat [View a video tutorial](https://www.youtube.com/watch?v=CBQGl6zokMs) on how to use Animate.css with jQuery here. -**Note:** `jQuery.one()` is used when you want to execute the event handler at most *once*. More information [here](http://api.jquery.com/one/). +**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: ```javascript $.fn.extend({ - animateCss: function (animationName, callback) { - var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; - this.addClass('animated ' + animationName).one(animationEnd, function() { - $(this).removeClass('animated ' + animationName); - if (callback) { - callback(); - } - }); - return this; - } + animateCss: function(animationName, callback) { + var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; + this.addClass('animated ' + animationName).one(animationEnd, function() { + $(this).removeClass('animated ' + animationName); + if (callback) { + callback(); + } + }); + return this; + }, }); ``` @@ -140,8 +151,8 @@ And use it like this: ```javascript $('#yourElement').animateCss('bounce'); -or -$('#yourElement').animateCss('bounce', function () { +or; +$('#yourElement').animateCss('bounce', function() { // Do somthing after animation }); ``` @@ -156,9 +167,10 @@ You can change the duration of your animations, add a delay or change the number } ``` -*Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, etc)* +_Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, etc)_ ## 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: ```sh @@ -183,7 +195,9 @@ Next, run `gulp` to compile your custom builds. For example, if you want only so ``` ## 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. diff --git a/animate-config.json b/animate-config.json index 167e25b..5822863 100644 --- a/animate-config.json +++ b/animate-config.json @@ -1,5 +1,4 @@ { - "attention_seekers": { "bounce": true, "flash": true, diff --git a/animate.css b/animate.css index 1e79e03..ee67c68 100644 --- a/animate.css +++ b/animate.css @@ -25,27 +25,32 @@ .animated.flipOutY, .animated.bounceIn, .animated.bounceOut { - animation-duration: .75s; + animation-duration: 0.75s; } @keyframes bounce { - from, 20%, 53%, 80%, to { - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - transform: translate3d(0,0,0); + from, + 20%, + 53%, + 80%, + to { + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transform: translate3d(0, 0, 0); } - 40%, 43% { - animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + 40%, + 43% { + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -30px, 0); } 70% { - animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -15px, 0); } 90% { - transform: translate3d(0,-4px,0); + transform: translate3d(0, -4px, 0); } } @@ -55,11 +60,14 @@ } @keyframes flash { - from, 50%, to { + from, + 50%, + to { opacity: 1; } - 25%, 75% { + 25%, + 75% { opacity: 0; } } @@ -106,11 +114,11 @@ } 65% { - transform: scale3d(.95, 1.05, 1); + transform: scale3d(0.95, 1.05, 1); } 75% { - transform: scale3d(1.05, .95, 1); + transform: scale3d(1.05, 0.95, 1); } to { @@ -123,15 +131,23 @@ } @keyframes shake { - from, to { + from, + to { transform: translate3d(0, 0, 0); } - 10%, 30%, 50%, 70%, 90% { + 10%, + 30%, + 50%, + 70%, + 90% { transform: translate3d(-10px, 0, 0); } - 20%, 40%, 60%, 80% { + 20%, + 40%, + 60%, + 80% { transform: translate3d(10px, 0, 0); } } @@ -203,15 +219,21 @@ transform: scale3d(1, 1, 1); } - 10%, 20% { - transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); + 10%, + 20% { + transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } - 30%, 50%, 70%, 90% { + 30%, + 50%, + 70%, + 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } - 40%, 60%, 80% { + 40%, + 60%, + 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } @@ -261,7 +283,9 @@ } @keyframes jello { - from, 11.1%, to { + from, + 11.1%, + to { transform: none; } @@ -300,13 +324,18 @@ } @keyframes bounceIn { - from, 20%, 40%, 60%, 80%, to { - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + from, + 20%, + 40%, + 60%, + 80%, + to { + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; - transform: scale3d(.3, .3, .3); + transform: scale3d(0.3, 0.3, 0.3); } 20% { @@ -314,7 +343,7 @@ } 40% { - transform: scale3d(.9, .9, .9); + transform: scale3d(0.9, 0.9, 0.9); } 60% { @@ -323,7 +352,7 @@ } 80% { - transform: scale3d(.97, .97, .97); + transform: scale3d(0.97, 0.97, 0.97); } to { @@ -337,8 +366,12 @@ } @keyframes bounceInDown { - from, 60%, 75%, 90%, to { - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + from, + 60%, + 75%, + 90%, + to { + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { @@ -369,8 +402,12 @@ } @keyframes bounceInLeft { - from, 60%, 75%, 90%, to { - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + from, + 60%, + 75%, + 90%, + to { + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { @@ -401,8 +438,12 @@ } @keyframes bounceInRight { - from, 60%, 75%, 90%, to { - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + from, + 60%, + 75%, + 90%, + to { + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { @@ -433,8 +474,12 @@ } @keyframes bounceInUp { - from, 60%, 75%, 90%, to { - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + from, + 60%, + 75%, + 90%, + to { + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { @@ -466,17 +511,18 @@ @keyframes bounceOut { 20% { - transform: scale3d(.9, .9, .9); + transform: scale3d(0.9, 0.9, 0.9); } - 50%, 55% { + 50%, + 55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; - transform: scale3d(.3, .3, .3); + transform: scale3d(0.3, 0.3, 0.3); } } @@ -489,7 +535,8 @@ transform: translate3d(0, 10px, 0); } - 40%, 45% { + 40%, + 45% { opacity: 1; transform: translate3d(0, -20px, 0); } @@ -541,7 +588,8 @@ transform: translate3d(0, -10px, 0); } - 40%, 45% { + 40%, + 45% { opacity: 1; transform: translate3d(0, 20px, 0); } @@ -849,7 +897,7 @@ } 80% { - transform: perspective(400px) scale3d(.95, .95, .95); + transform: perspective(400px) scale3d(0.95, 0.95, 0.95); animation-timing-function: ease-in; } @@ -1197,13 +1245,15 @@ animation-timing-function: ease-in-out; } - 20%, 60% { + 20%, + 60% { transform: rotate3d(0, 0, 1, 80deg); transform-origin: top left; animation-timing-function: ease-in-out; } - 40%, 80% { + 40%, + 80% { transform: rotate3d(0, 0, 1, 60deg); transform-origin: top left; animation-timing-function: ease-in-out; @@ -1283,7 +1333,7 @@ @keyframes zoomIn { from { opacity: 0; - transform: scale3d(.3, .3, .3); + transform: scale3d(0.3, 0.3, 0.3); } 50% { @@ -1298,14 +1348,14 @@ @keyframes zoomInDown { from { opacity: 0; - transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; - transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @@ -1316,14 +1366,14 @@ @keyframes zoomInLeft { from { opacity: 0; - transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; - transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @@ -1334,14 +1384,14 @@ @keyframes zoomInRight { from { opacity: 0; - transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; - transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @@ -1352,14 +1402,14 @@ @keyframes zoomInUp { from { opacity: 0; - transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; - transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @@ -1374,7 +1424,7 @@ 50% { opacity: 0; - transform: scale3d(.3, .3, .3); + transform: scale3d(0.3, 0.3, 0.3); } to { @@ -1389,15 +1439,15 @@ @keyframes zoomOutDown { 40% { opacity: 1; - transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; - transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform-origin: center bottom; - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @@ -1408,12 +1458,12 @@ @keyframes zoomOutLeft { 40% { opacity: 1; - transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; - transform: scale(.1) translate3d(-2000px, 0, 0); + transform: scale(0.1) translate3d(-2000px, 0, 0); transform-origin: left center; } } @@ -1425,12 +1475,12 @@ @keyframes zoomOutRight { 40% { opacity: 1; - transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; - transform: scale(.1) translate3d(2000px, 0, 0); + transform: scale(0.1) translate3d(2000px, 0, 0); transform-origin: right center; } } @@ -1442,15 +1492,15 @@ @keyframes zoomOutUp { 40% { opacity: 1; - transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; - transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform-origin: center bottom; - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } diff --git a/bower.json b/bower.json index 168b6b8..f641274 100644 --- a/bower.json +++ b/bower.json @@ -1,11 +1,5 @@ { "name": "animate.css", "main": "./animate.css", - "ignore": [ - ".*", - "*.yml", - "Gemfile", - "Gemfile.lock", - "*.md" - ] + "ignore": [".*", "*.yml", "Gemfile", "Gemfile.lock", "*.md"] } diff --git a/gulpfile.js b/gulpfile.js index aed4102..78283c2 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -25,11 +25,11 @@ var opts = { autoprefixer: { browsers: ['> 1%, last 2 versions, Firefox ESR'], - cascade: false + cascade: false, }, minRename: { - suffix: '.min' + suffix: '.min', }, banner: [ @@ -40,8 +40,8 @@ var opts = { ' * Licensed under the MIT license - http://opensource.org/licenses/MIT', ' *', ' * Copyright (c) <%= new Date().getFullYear() %> <%= author.name %>', - ' */\n\n' - ].join('\n') + ' */\n\n', + ].join('\n'), }; // ---------------------------- @@ -53,21 +53,19 @@ gulp.task('default', function() { }); gulp.task('createCSS', function() { - return gulp.src(activatedAnimations) + return gulp + .src(activatedAnimations) .pipe(concat(opts.concatName)) - .pipe(postcss([ - autoprefixer(opts.autoprefixer) - ])) + .pipe(postcss([autoprefixer(opts.autoprefixer)])) .pipe(gulp.dest(opts.destPath)) - .pipe(postcss([ - cssnano({reduceIdents: {keyframes: false}}) - ])) + .pipe(postcss([cssnano({reduceIdents: {keyframes: false}})])) .pipe(rename(opts.minRename)) .pipe(gulp.dest(opts.destPath)); }); gulp.task('addHeader', function() { - return gulp.src('*.css') + return gulp + .src('*.css') .pipe(header(opts.banner, pkg)) .pipe(gulp.dest(opts.destPath)); }); @@ -79,8 +77,10 @@ gulp.task('addHeader', function() { // Read the config file and return an array of the animations to be activated function activateAnimations() { var categories = JSON.parse(fs.readFileSync('animate-config.json')), - category, files, file, - target = [ 'source/_base.css' ], + category, + files, + file, + target = ['source/_base.css'], count = 0; for (category in categories) { @@ -88,7 +88,8 @@ function activateAnimations() { files = categories[category]; for (file in files) { - if (files[file]) { // marked as true + if (files[file]) { + // marked as true target.push('source/' + category + '/' + file + '.css'); count += 1; } diff --git a/package.json b/package.json index 5cee08e..1a4792d 100644 --- a/package.json +++ b/package.json @@ -37,14 +37,14 @@ }, "prettier": { "bracketSpacing": false, - "printWidth": 80, + "printWidth": 120, "proseWrap": false, "singleQuote": true, "tabWidth": 2, "trailingComma": "all" }, "scripts": { - "fix": "prettier --ignore-path .gitignore --write '**/*.{js,json,md,css}'", + "fix": "prettier --ignore-path .gitignore --write \"**/*.{js,json,md,css}\"", "precommit": "lint-staged" }, "spm": { diff --git a/source/_base.css b/source/_base.css index 630dc79..594c70e 100644 --- a/source/_base.css +++ b/source/_base.css @@ -15,5 +15,5 @@ .animated.flipOutY, .animated.bounceIn, .animated.bounceOut { - animation-duration: .75s; + animation-duration: 0.75s; } diff --git a/source/attention_seekers/bounce.css b/source/attention_seekers/bounce.css index 8f555f1..b43a8f0 100644 --- a/source/attention_seekers/bounce.css +++ b/source/attention_seekers/bounce.css @@ -1,16 +1,21 @@ @keyframes bounce { - from, 20%, 53%, 80%, to { - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - transform: translate3d(0,0,0); + from, + 20%, + 53%, + 80%, + to { + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transform: translate3d(0, 0, 0); } - 40%, 43% { - animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + 40%, + 43% { + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -30px, 0); } 70% { - animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -15px, 0); } diff --git a/source/attention_seekers/flash.css b/source/attention_seekers/flash.css index 8ad7225..e8e9fd1 100644 --- a/source/attention_seekers/flash.css +++ b/source/attention_seekers/flash.css @@ -1,9 +1,12 @@ @keyframes flash { - from, 50%, to { + from, + 50%, + to { opacity: 1; } - 25%, 75% { + 25%, + 75% { opacity: 0; } } diff --git a/source/attention_seekers/jello.css b/source/attention_seekers/jello.css index 4487249..19c098c 100644 --- a/source/attention_seekers/jello.css +++ b/source/attention_seekers/jello.css @@ -1,5 +1,7 @@ @keyframes jello { - from, 11.1%, to { + from, + 11.1%, + to { transform: none; } diff --git a/source/attention_seekers/rubberBand.css b/source/attention_seekers/rubberBand.css index 2de8461..656ddd7 100644 --- a/source/attention_seekers/rubberBand.css +++ b/source/attention_seekers/rubberBand.css @@ -16,11 +16,11 @@ } 65% { - transform: scale3d(.95, 1.05, 1); + transform: scale3d(0.95, 1.05, 1); } 75% { - transform: scale3d(1.05, .95, 1); + transform: scale3d(1.05, 0.95, 1); } to { diff --git a/source/attention_seekers/shake.css b/source/attention_seekers/shake.css index 76731c0..22f7ff6 100644 --- a/source/attention_seekers/shake.css +++ b/source/attention_seekers/shake.css @@ -1,13 +1,21 @@ @keyframes shake { - from, to { + from, + to { transform: translate3d(0, 0, 0); } - 10%, 30%, 50%, 70%, 90% { + 10%, + 30%, + 50%, + 70%, + 90% { transform: translate3d(-10px, 0, 0); } - 20%, 40%, 60%, 80% { + 20%, + 40%, + 60%, + 80% { transform: translate3d(10px, 0, 0); } } diff --git a/source/attention_seekers/tada.css b/source/attention_seekers/tada.css index 82dd903..2250616 100644 --- a/source/attention_seekers/tada.css +++ b/source/attention_seekers/tada.css @@ -3,15 +3,21 @@ transform: scale3d(1, 1, 1); } - 10%, 20% { - transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); + 10%, + 20% { + transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } - 30%, 50%, 70%, 90% { + 30%, + 50%, + 70%, + 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } - 40%, 60%, 80% { + 40%, + 60%, + 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } diff --git a/source/bouncing_entrances/bounceIn.css b/source/bouncing_entrances/bounceIn.css index 9f253a1..8d1e91b 100644 --- a/source/bouncing_entrances/bounceIn.css +++ b/source/bouncing_entrances/bounceIn.css @@ -1,11 +1,16 @@ @keyframes bounceIn { - from, 20%, 40%, 60%, 80%, to { - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + from, + 20%, + 40%, + 60%, + 80%, + to { + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; - transform: scale3d(.3, .3, .3); + transform: scale3d(0.3, 0.3, 0.3); } 20% { @@ -13,7 +18,7 @@ } 40% { - transform: scale3d(.9, .9, .9); + transform: scale3d(0.9, 0.9, 0.9); } 60% { @@ -22,7 +27,7 @@ } 80% { - transform: scale3d(.97, .97, .97); + transform: scale3d(0.97, 0.97, 0.97); } to { diff --git a/source/bouncing_entrances/bounceInDown.css b/source/bouncing_entrances/bounceInDown.css index 0d855a7..e44f0f8 100644 --- a/source/bouncing_entrances/bounceInDown.css +++ b/source/bouncing_entrances/bounceInDown.css @@ -1,6 +1,10 @@ @keyframes bounceInDown { - from, 60%, 75%, 90%, to { - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + from, + 60%, + 75%, + 90%, + to { + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { diff --git a/source/bouncing_entrances/bounceInLeft.css b/source/bouncing_entrances/bounceInLeft.css index 4f1032a..76c63c6 100644 --- a/source/bouncing_entrances/bounceInLeft.css +++ b/source/bouncing_entrances/bounceInLeft.css @@ -1,6 +1,10 @@ @keyframes bounceInLeft { - from, 60%, 75%, 90%, to { - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + from, + 60%, + 75%, + 90%, + to { + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { diff --git a/source/bouncing_entrances/bounceInRight.css b/source/bouncing_entrances/bounceInRight.css index 6e06e02..a06564c 100644 --- a/source/bouncing_entrances/bounceInRight.css +++ b/source/bouncing_entrances/bounceInRight.css @@ -1,6 +1,10 @@ @keyframes bounceInRight { - from, 60%, 75%, 90%, to { - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + from, + 60%, + 75%, + 90%, + to { + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { diff --git a/source/bouncing_entrances/bounceInUp.css b/source/bouncing_entrances/bounceInUp.css index fd0d472..eca199c 100644 --- a/source/bouncing_entrances/bounceInUp.css +++ b/source/bouncing_entrances/bounceInUp.css @@ -1,6 +1,10 @@ @keyframes bounceInUp { - from, 60%, 75%, 90%, to { - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + from, + 60%, + 75%, + 90%, + to { + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { diff --git a/source/bouncing_exits/bounceOut.css b/source/bouncing_exits/bounceOut.css index b170c28..e69c708 100644 --- a/source/bouncing_exits/bounceOut.css +++ b/source/bouncing_exits/bounceOut.css @@ -1,16 +1,17 @@ @keyframes bounceOut { 20% { - transform: scale3d(.9, .9, .9); + transform: scale3d(0.9, 0.9, 0.9); } - 50%, 55% { + 50%, + 55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; - transform: scale3d(.3, .3, .3); + transform: scale3d(0.3, 0.3, 0.3); } } diff --git a/source/bouncing_exits/bounceOutDown.css b/source/bouncing_exits/bounceOutDown.css index 462cffc..de29f35 100644 --- a/source/bouncing_exits/bounceOutDown.css +++ b/source/bouncing_exits/bounceOutDown.css @@ -3,7 +3,8 @@ transform: translate3d(0, 10px, 0); } - 40%, 45% { + 40%, + 45% { opacity: 1; transform: translate3d(0, -20px, 0); } diff --git a/source/bouncing_exits/bounceOutUp.css b/source/bouncing_exits/bounceOutUp.css index 9b25891..d2b6233 100644 --- a/source/bouncing_exits/bounceOutUp.css +++ b/source/bouncing_exits/bounceOutUp.css @@ -3,7 +3,8 @@ transform: translate3d(0, -10px, 0); } - 40%, 45% { + 40%, + 45% { opacity: 1; transform: translate3d(0, 20px, 0); } diff --git a/source/flippers/flip.css b/source/flippers/flip.css index 579ddb8..1560c62 100644 --- a/source/flippers/flip.css +++ b/source/flippers/flip.css @@ -15,7 +15,7 @@ } 80% { - transform: perspective(400px) scale3d(.95, .95, .95); + transform: perspective(400px) scale3d(0.95, 0.95, 0.95); animation-timing-function: ease-in; } diff --git a/source/specials/hinge.css b/source/specials/hinge.css index 56ec58a..6086323 100644 --- a/source/specials/hinge.css +++ b/source/specials/hinge.css @@ -4,13 +4,15 @@ animation-timing-function: ease-in-out; } - 20%, 60% { + 20%, + 60% { transform: rotate3d(0, 0, 1, 80deg); transform-origin: top left; animation-timing-function: ease-in-out; } - 40%, 80% { + 40%, + 80% { transform: rotate3d(0, 0, 1, 60deg); transform-origin: top left; animation-timing-function: ease-in-out; diff --git a/source/zooming_entrances/zoomIn.css b/source/zooming_entrances/zoomIn.css index fe43013..460afc5 100644 --- a/source/zooming_entrances/zoomIn.css +++ b/source/zooming_entrances/zoomIn.css @@ -1,7 +1,7 @@ @keyframes zoomIn { from { opacity: 0; - transform: scale3d(.3, .3, .3); + transform: scale3d(0.3, 0.3, 0.3); } 50% { diff --git a/source/zooming_entrances/zoomInDown.css b/source/zooming_entrances/zoomInDown.css index f5d60a4..156e371 100644 --- a/source/zooming_entrances/zoomInDown.css +++ b/source/zooming_entrances/zoomInDown.css @@ -1,14 +1,14 @@ @keyframes zoomInDown { from { opacity: 0; - transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; - transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } diff --git a/source/zooming_entrances/zoomInLeft.css b/source/zooming_entrances/zoomInLeft.css index 1e3ddfe..e7b8921 100644 --- a/source/zooming_entrances/zoomInLeft.css +++ b/source/zooming_entrances/zoomInLeft.css @@ -1,14 +1,14 @@ @keyframes zoomInLeft { from { opacity: 0; - transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; - transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } diff --git a/source/zooming_entrances/zoomInRight.css b/source/zooming_entrances/zoomInRight.css index 276da66..5362f4b 100644 --- a/source/zooming_entrances/zoomInRight.css +++ b/source/zooming_entrances/zoomInRight.css @@ -1,14 +1,14 @@ @keyframes zoomInRight { from { opacity: 0; - transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; - transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } diff --git a/source/zooming_entrances/zoomInUp.css b/source/zooming_entrances/zoomInUp.css index c3e23a4..639e992 100644 --- a/source/zooming_entrances/zoomInUp.css +++ b/source/zooming_entrances/zoomInUp.css @@ -1,14 +1,14 @@ @keyframes zoomInUp { from { opacity: 0; - transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; - transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } diff --git a/source/zooming_exits/zoomOut.css b/source/zooming_exits/zoomOut.css index 30fbae4..b284cd5 100644 --- a/source/zooming_exits/zoomOut.css +++ b/source/zooming_exits/zoomOut.css @@ -5,7 +5,7 @@ 50% { opacity: 0; - transform: scale3d(.3, .3, .3); + transform: scale3d(0.3, 0.3, 0.3); } to { diff --git a/source/zooming_exits/zoomOutDown.css b/source/zooming_exits/zoomOutDown.css index ea443b7..b463d10 100644 --- a/source/zooming_exits/zoomOutDown.css +++ b/source/zooming_exits/zoomOutDown.css @@ -1,15 +1,15 @@ @keyframes zoomOutDown { 40% { opacity: 1; - transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; - transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform-origin: center bottom; - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } diff --git a/source/zooming_exits/zoomOutLeft.css b/source/zooming_exits/zoomOutLeft.css index 79fbe9a..9b82a74 100644 --- a/source/zooming_exits/zoomOutLeft.css +++ b/source/zooming_exits/zoomOutLeft.css @@ -1,12 +1,12 @@ @keyframes zoomOutLeft { 40% { opacity: 1; - transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; - transform: scale(.1) translate3d(-2000px, 0, 0); + transform: scale(0.1) translate3d(-2000px, 0, 0); transform-origin: left center; } } diff --git a/source/zooming_exits/zoomOutRight.css b/source/zooming_exits/zoomOutRight.css index 7262f89..e574758 100644 --- a/source/zooming_exits/zoomOutRight.css +++ b/source/zooming_exits/zoomOutRight.css @@ -1,12 +1,12 @@ @keyframes zoomOutRight { 40% { opacity: 1; - transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; - transform: scale(.1) translate3d(2000px, 0, 0); + transform: scale(0.1) translate3d(2000px, 0, 0); transform-origin: right center; } } diff --git a/source/zooming_exits/zoomOutUp.css b/source/zooming_exits/zoomOutUp.css index c06bae8..e398d51 100644 --- a/source/zooming_exits/zoomOutUp.css +++ b/source/zooming_exits/zoomOutUp.css @@ -1,15 +1,15 @@ @keyframes zoomOutUp { 40% { opacity: 1; - transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; - transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform-origin: center bottom; - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }