add animation delay

Author: bentzibentz

README.md

@@ -27,7 +27,8 @@ plugins: [
           heartBeatSpeed: 1000,
           hingeSpeed: 2000,
           bounceInSpeed: 750,
-          bounceOutSpeed: 750
+          bounceOutSpeed: 750,
+          animationDeplaySpeed: 1000
         },
         variants: ['responsive'],
       }),
@@ -40,6 +41,7 @@ plugins: [
 * ```hingeSpeed``` used for the animationDuration of the .hingeSpeed class
 * ```bounceInSpeed``` used for the animationDuration of the .bounceInSpeed class
 * ```bounceOutSpeed``` used for the animationDuration of the .bounceOutSpeed class
+* ```animationDeplaySpeed``` used for the animationDeplay, just add .delay class to your element
 
 All of these settings are optional, if not set basic animate.css fallback animationDuration speed is used.
 
@@ -48,6 +50,16 @@ The plugin generates all the animate.css utility classes for you.
 ### Available Animate CSS classes
 * .animated
 * .infinite
+* .delay
+* .delay-1
+* .delay-2
+* .delay-3
+* .delay-4
+* .delay-5
+* .fast
+* .faster
+* .slow
+* .slower
 * .bounce
 * .flash
 * .pulse

animate/animate.js

@@ -22,6 +22,7 @@ module.exports = function ({ settings = {}, variants = ['responsive'] }) {
         const hingeSpeed = settings.hingeSpeed ? settings.hingeSpeed : 2000;
         const bounceInSpeed = settings.bounceInSpeed ? settings.bounceInSpeed : 750;
         const bounceOutSpeed = settings.bounceOutSpeed ? settings.bounceOutSpeed : 750;
+        const animationDeplaySpeed = settings.animationDeplaySpeed ? settings.animationDeplaySpeed : 500;
         const opacity = settings.opacity ? settings.opacity : 1;
 
         addUtilities({
@@ -32,6 +33,36 @@ module.exports = function ({ settings = {}, variants = ['responsive'] }) {
             '.infinite': {
                 animationIterationCount: 'infinite'
             },
+            '.delay': {
+                animationDelay: `${animationDeplaySpeed}ms`
+            },
+            '.delay-1s': {
+                animationDelay: `1000ms`
+            },
+            '.delay-2s': {
+                animationDelay: `2000ms`
+            },
+            '.delay-3s': {
+                animationDelay: `3000ms`
+            },
+            '.delay-4s': {
+                animationDelay: `4000ms`
+            },
+            '.delay-5s': {
+                animationDelay: `5000ms`
+            },
+            '.fast': {
+                animationDelay: `800ms`
+            },
+            '.faster': {
+                animationDelay: `500ms`
+            },
+            '.slow': {
+                animationDelay: `2000ms`
+            },
+            '.slower': {
+                animationDelay: `3000ms`
+            },
             '.bounce': {
                 animationName: 'bounce',
                 transformOrigin: 'center bottom'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss-animatecss",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Add Animate CSS as Tailwind CSS plugin to your project.",
   "main": "index.js",
   "repository": {