Add new animation speed & delay classes

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

Author: warengonzaga

.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%,

animate.min.css

@@ -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
 // ----------------------------