Minor Updates and Small Fixes (#790)

warengonzaga · eltonmesquita · commit 824484ed0349 · 2018-07-18T22:24:17.000-03:00
* Update the devDependencies

* Update the gitignore file

* Update the version of gulp

* Fix the build error in the gulpfile script

* Update node version testing for travis

* Update the package.json

* Fix some errors

* Update the devdependencies

* Re arrange the .gitignore

* Update devdependency to the latest stable version

* Add new line at the end of the file

* Fix versioning error

* Update DevDependencies

* Update the version from 3.6.1 into 3.6.2

* Add delays up to 5 seconds

* Update the files from 3.6.1 into 3.6.2

* Modify the documentation and add delay option
diff --git 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
diff --git 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        |                    |                     |                      |
 | ----------------- | ------------------ | ------------------- | -------------------- |
@@ -85,7 +85,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/)
@@ -199,6 +199,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:
diff --git a/animate.css b/animate.css
@@ -2,7 +2,7 @@
 
 /*!
  * animate.css -http://daneden.me/animate
- * Version - 3.6.0
+ * 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%,
diff --git a/animate.min.css b/animate.min.css
diff --git 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')
 };
 
 // ----------------------------
diff --git 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}": ["prettier --write", "git add"]
diff --git 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;
+}
