Merge branch 'master' into master

2018-07-21 20:38:29 +05:30 · 2018-07-21 20:38:29 +05:30 · fe18e0f552
parent 502a2805e6 de6b531570
commit fe18e0f552
9 changed files with 123 additions and 57 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,8 +1,8 @@
+.db
+.DS_Store
+.idea
+.ini
+.log
 .sass-cache
 node_modules/
-npm-debug.log
 test/
-.idea
-.DS_Store
-Thumbs.db
-Desktop.ini
--- a/README.md
+++ b/README.md
@ -20,7 +20,7 @@ $ npm install animate.css --save

 ## Basic Usage

-1. Include the stylesheet on your document's `<head>`
+1.  Include the stylesheet on your document's `<head>`

 ```html
 <head>
@ -56,9 +56,9 @@ You may [generate a SRI hash](https://www.srihash.org/) of that particular versi
 </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.
+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:
+3.  Finally you need to add one of the following classes:

 | Class Name        |                    |                     |                      |
 | ----------------- | ------------------ | ------------------- | -------------------- |
@ -86,7 +86,7 @@ You may [generate a SRI hash](https://www.srihash.org/) of that particular versi
 Full example:

 ```html
-<h1 class="animated infinite bounce">Example</h1>
+<h1 class="animated infinite bounce delay-2s">Example</h1>
 ```

 [Check out all the animations here!](https://daneden.github.io/animate.css/)
@ -200,6 +200,14 @@ 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)_

+You can also add delays directly on the element's class attribute, just like this:
+
+```html
+<div class="animated bounce delay-2s">Example</div>
+```
+
+_Note: the default delays are from 1 seconds to 5 seconds only. If you want to add customized delays, you can add it directly to your css_
+
 ## 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:
--- a/animate.css
+++ b/animate.css
@ -2,7 +2,7 @@

 /*!
 * animate.css -http://daneden.me/animate
- * Version - 3.6.1
+ * Version - 3.6.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2018 Daniel Eden
@ -20,6 +20,31 @@
  animation-iteration-count: infinite;
 }

+.animated.delay-1s {
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+.animated.delay-2s {
+  -webkit-animation-delay: 2s;
+  animation-delay: 2s;
+}
+
+.animated.delay-3s {
+  -webkit-animation-delay: 3s;
+  animation-delay: 3s;
+}
+
+.animated.delay-4s {
+  -webkit-animation-delay: 4s;
+  animation-delay: 4s;
+}
+
+.animated.delay-5s {
+  -webkit-animation-delay: 5s;
+  animation-delay: 5s;
+}
+
@-webkit-keyframes bounce {
  from,
  20%,
@ -1913,36 +1938,44 @@

@-webkit-keyframes flip {
  from {
-    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
-    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
+      rotate3d(0, 1, 0, -360deg);
+    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
-    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
+      rotate3d(0, 1, 0, -190deg);
+    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
+      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
-    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
+      rotate3d(0, 1, 0, -170deg);
+    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
+      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
-    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
-    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
+    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
+      rotate3d(0, 1, 0, 0deg);
+    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
+      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
-    -webkit-transform: perspective(400px);
-    transform: perspective(400px);
+    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
+      rotate3d(0, 1, 0, 0deg);
+    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
@ -1950,36 +1983,44 @@

@keyframes flip {
  from {
-    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
-    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
+      rotate3d(0, 1, 0, -360deg);
+    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
-    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
+      rotate3d(0, 1, 0, -190deg);
+    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
+      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
-    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
+      rotate3d(0, 1, 0, -170deg);
+    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
+      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
-    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
-    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
+    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
+      rotate3d(0, 1, 0, 0deg);
+    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
+      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
-    -webkit-transform: perspective(400px);
-    transform: perspective(400px);
+    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
+      rotate3d(0, 1, 0, 0deg);
+    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
@ -2248,13 +2289,11 @@
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
-    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
-    opacity: 1;
  }
 }

@ -2274,13 +2313,11 @@
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
-    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
-    opacity: 1;
  }
 }

--- a/animate.min.css
+++ b/animate.min.css
--- 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: [
@ -41,7 +41,7 @@ var opts = {
    ' *',
    ' * Copyright (c) <%= new Date().getFullYear() %> <%= author.name %>',
    ' */\n\n',
-  ].join('\n'),
+  ].join('\n')
 };

 // ----------------------------
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "animate.css",
-  "version": "3.6.1",
+  "version": "3.6.2",
  "main": "animate.css",
  "repository": {
    "type": "git",
@ -20,19 +20,19 @@
    }
  },
  "devDependencies": {
-    "autoprefixer": "^7.1.6",
-    "cssnano": "^3.5.1",
-    "eslint": "^4.11.0",
+    "autoprefixer": "^8.0.0",
+    "cssnano": "^3.10.0",
+    "eslint": "^4.18.0",
    "gulp": "^3.9.1",
-    "gulp-concat": "^2.6.0",
-    "gulp-header": "^1.7.1",
-    "gulp-postcss": "^7.0.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-header": "^2.0.1",
+    "gulp-postcss": "^7.0.1",
    "gulp-rename": "^1.2.2",
-    "gulp-util": "^3.0.7",
+    "gulp-util": "^3.0.8",
    "husky": "^0.14.3",
-    "lint-staged": "^6.0.0",
-    "prettier": "^1.9.1",
-    "run-sequence": "^2.2.0"
+    "lint-staged": "^7.0.0",
+    "prettier": "^1.10.2",
+    "run-sequence": "^2.2.1"
  },
  "lint-staged": {
    "*.{js,json,md,css}": [
--- a/source/_base.css
+++ b/source/_base.css
@ -6,3 +6,23 @@
 .animated.infinite {
  animation-iteration-count: infinite;
 }
+
+.animated.delay-1s {
+  animation-delay: 1s;
+}
+
+.animated.delay-2s {
+  animation-delay: 2s;
+}
+
+.animated.delay-3s {
+  animation-delay: 3s;
+}
+
+.animated.delay-4s {
+  animation-delay: 4s;
+}
+
+.animated.delay-5s {
+  animation-delay: 5s;
+}
--- a/source/flippers/flip.css
+++ b/source/flippers/flip.css
@ -1,26 +1,29 @@
@keyframes flip {
  from {
-    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    animation-timing-function: ease-out;
  }

  40% {
-    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
+      rotate3d(0, 1, 0, -190deg);
    animation-timing-function: ease-out;
  }

  50% {
-    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
+      rotate3d(0, 1, 0, -170deg);
    animation-timing-function: ease-in;
  }

  80% {
-    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
+    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
+      rotate3d(0, 1, 0, 0deg);
    animation-timing-function: ease-in;
  }

  to {
-    transform: perspective(400px);
+    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    animation-timing-function: ease-in;
  }
 }
--- a/source/lightspeed/lightSpeedIn.css
+++ b/source/lightspeed/lightSpeedIn.css
@ -11,12 +11,10 @@

  80% {
    transform: skewX(-5deg);
-    opacity: 1;
  }

  to {
    transform: translate3d(0, 0, 0);
-    opacity: 1;
  }
 }