Add new animation speed & delay classes

3.7.0 New Feature: Animation speed & delay classes, dependency updates

.travis.yml

@@ -1,8 +1,6 @@
 language: node_js
 node_js:
-- "9"
-- "8"
-- "6"
+- "10"
 before_script:
   - npm install -g gulp
 script: gulp

README.md

@@ -200,13 +200,41 @@ 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)_
 
+## Define _Delay_ and _Speed_ using Class
+
+#### Delay Class
+
 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_
+| Class Name | Delay Time |
+| ---------- | ---------- |
+| `delay-2s` | `2s`       |
+| `delay-3s` | `3s`       |
+| `delay-4s` | `4s`       |
+| `delay-5s` | `5s`       |
+
+> _**Note**: The default delays are from 1 second to 5 seconds only. If you want to add customized delays, you can add it directly to your css_
+
+#### Slow, Slower, Fast, and Faster Class
+
+You can control the speed of the animation by adding these classes, as a sample below:
+
+```html
+<div class="animated bounce faster">Example</div>
+```
+
+| Class Name | Speed Time |
+| ---------- | ---------- |
+| `slow`     | `2s`       |
+| `slower`   | `3s`       |
+| `fast`     | `800ms`    |
+| `faster`   | `500ms`    |
+
+> _**Note**: The default speed is `1s` which is you don't need to put any class. If you want to add a custom duration, you can add it directly to your css instead_
 
 ## Custom Builds
 

animate.css

@@ -2,7 +2,7 @@
 
 /*!
  * animate.css -http://daneden.me/animate
- * Version - 3.6.2
+ * Version - 3.7.0
  * Licensed under the MIT license - http://opensource.org/licenses/MIT
  *
  * Copyright (c) 2018 Daniel Eden
@@ -45,6 +45,26 @@
   animation-delay: 5s;
 }
 
+.animated.fast {
+  -webkit-animation-duration: 800ms;
+  animation-duration: 800ms;
+}
+
+.animated.faster {
+  -webkit-animation-duration: 500ms;
+  animation-duration: 500ms;
+}
+
+.animated.slow {
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+}
+
+.animated.slower {
+  -webkit-animation-duration: 3s;
+  animation-duration: 3s;
+}
+
 @-webkit-keyframes bounce {
   from,
   20%,

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,17 +41,13 @@ var opts = {
     ' *',
     ' * Copyright (c) <%= new Date().getFullYear() %> <%= author.name %>',
     ' */\n\n',
-  ].join('\n')
+  ].join('\n'),
 };
 
 // ----------------------------
 // Gulp task definitions
 // ----------------------------
 
-gulp.task('default', function() {
-  runSequence('createCSS', 'addHeader');
-});
-
 gulp.task('createCSS', function() {
   return gulp
     .src(activatedAnimations)
@@ -70,6 +66,8 @@ gulp.task('addHeader', function() {
     .pipe(gulp.dest(opts.destPath));
 });
 
+gulp.task('default', gulp.series('createCSS', 'addHeader'));
+
 // ----------------------------
 // Helpers/functions
 // ----------------------------

package.json

@@ -1,6 +1,6 @@
 {
   "name": "animate.css",
-  "version": "3.6.2",
+  "version": "3.7.0",
   "main": "animate.css",
   "repository": {
     "type": "git",
@@ -20,10 +20,10 @@
     }
   },
   "devDependencies": {
-    "autoprefixer": "^8.0.0",
-    "cssnano": "^3.10.0",
-    "eslint": "^4.18.0",
-    "gulp": "^3.9.1",
+    "autoprefixer": "^9.0.1",
+    "cssnano": "^4.0.3",
+    "eslint": "^5.2.0",
+    "gulp": "^4.0.0",
     "gulp-concat": "^2.6.1",
     "gulp-header": "^2.0.1",
     "gulp-postcss": "^7.0.1",
@@ -47,6 +47,7 @@
     "trailingComma": "all"
   },
   "scripts": {
+    "gulp": "./node_modules/gulp/bin/gulp.js",
     "start": "gulp",
     "prettier": "prettier --write \"**/*.{js,json,md,css}\"",
     "precommit": "lint-staged"

source/_base.css

@@ -26,3 +26,19 @@
 .animated.delay-5s {
   animation-delay: 5s;
 }
+
+.animated.fast {
+  animation-duration: 800ms;
+}
+
+.animated.faster {
+  animation-duration: 500ms; 
+}
+
+.animated.slow {
+  animation-duration: 2s;
+}
+
+.animated.slower {
+  animation-duration: 3s;
+}

source/attention_seekers/heartBeat.css

@@ -1,28 +1,26 @@
-@keyframes heartBeat{
-  
-  0%{
+@keyframes heartBeat {
+  0% {
     transform: scale(1);
   }
-  
-  14%{
+
+  14% {
     transform: scale(1.3);
   }
-  
-  28%{
+
+  28% {
     transform: scale(1);
   }
-  
-  42%{
+
+  42% {
     transform: scale(1.3);
   }
-  
-  70%{
+
+  70% {
     transform: scale(1);
   }
-  
 }
 
-.heartBeat{
+.heartBeat {
   animation-name: heartBeat;
   animation-duration: 1.3s;
   animation-timing-function: ease-in-out;