diff --git a/.editorconfig b/.editorconfig
index 8951c39..19afc83 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -2,10 +2,11 @@
root = true
[*]
-indent_style = space
-indent_size = 2
-tab_width = 2
-end_of_line = lf
charset = utf-8
-trim_trailing_whitespace = true
+end_of_line = lf
+indent_size = 2
+indent_style = space
insert_final_newline = true
+max_line_length = 100
+tab_width = 2
+trim_trailing_whitespace = true
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..39e8726
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+animate.min.css
diff --git a/README.md b/README.md
index 10fa31f..d262c37 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,6 @@
# Animate.css [](https://github.com/daneden/animate.css/releases) [](https://cdnjs.com/libraries/animate.css) [](https://travis-ci.org/WarenGonzaga/animate.css) [](https://david-dm.org/WarenGonzaga/animate.css?type=dev) [](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
@@ -112,27 +123,31 @@ http://api.jquery.com/one/
-->
```javascript
-$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
+$('#yourElement').one(
+ 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
+ doSomething,
+);
```
[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 +155,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 +171,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 +199,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 311e50c..60443c7 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 2cc5f9e..ebb9257 100644
--- a/package.json
+++ b/package.json
@@ -22,14 +22,31 @@
"devDependencies": {
"autoprefixer": "^7.1.6",
"cssnano": "^3.5.1",
+ "eslint": "^4.11.0",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0",
"gulp-header": "^1.7.1",
"gulp-postcss": "^7.0.0",
"gulp-rename": "^1.2.2",
"gulp-util": "^3.0.7",
+ "husky": "^0.14.3",
+ "lint-staged": "^6.0.0",
+ "prettier": "^1.9.1",
"run-sequence": "^2.2.0"
},
+ "lint-staged": {
+ "*.{js,json,md,css}": ["prettier --write", "git add"]
+ },
+ "prettier": {
+ "bracketSpacing": false,
+ "proseWrap": "never",
+ "singleQuote": true,
+ "trailingComma": "all"
+ },
+ "scripts": {
+ "prettier": "prettier --write \"**/*.{js,json,md,css}\"",
+ "precommit": "lint-staged"
+ },
"spm": {
"main": "./animate.css"
}
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 4a458f1..da62985 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 78ad97e..70c39e3 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 71c55f6..ee0e7b2 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);
}
}