diff --git a/css-compiled/ripples.css b/css-compiled/ripples.css
index a4967241..a3c19300 100644
--- a/css-compiled/ripples.css
+++ b/css-compiled/ripples.css
@@ -36,7 +36,7 @@
   opacity: 1;
 }
 .ripple.ripple-out {
-  -webkit-transition: opacity 1s linear 0s !important;
-  transition: opacity 0.8s linear 0s !important;
+  -webkit-transition: opacity 0.1s linear 0s !important;
+  transition: opacity 0.1s linear 0s !important;
   opacity: 0;
 }
diff --git a/less/ripples.less b/less/ripples.less
index d51b0862..5f22f1d7 100644
--- a/less/ripples.less
+++ b/less/ripples.less
@@ -1,7 +1,7 @@
 // out: ../css-compiled/ripples.css
 
 .withripple {
-  position: relative;
+    position: relative;
 }
 .ripple-wrapper {
     position: absolute;
@@ -30,14 +30,14 @@
     opacity: 0;
 }
 .ripple.ripple-on {
-  -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-  -ms-transition: opacity 0.15s ease-in 0s, -ms-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-  -moz-transition: opacity 0.15s ease-in 0s, -moz-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-  transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-  opacity: 1;
+    -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
+    -ms-transition: opacity 0.15s ease-in 0s, -ms-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
+    -moz-transition: opacity 0.15s ease-in 0s, -moz-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
+    transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
+    opacity: 1;
 }
 .ripple.ripple-out {
-    -webkit-transition: opacity 1s linear 0s !important;
-    transition: opacity 0.8s linear 0s !important;
+    -webkit-transition: opacity 0.1s linear 0s !important;
+    transition: opacity 0.1s linear 0s !important;
     opacity: 0;
 }
diff --git a/scripts/ripples.js b/scripts/ripples.js
index 4336dbe3..73b4fcc7 100644
--- a/scripts/ripples.js
+++ b/scripts/ripples.js
@@ -1,110 +1,114 @@
 /* globals CustomEvent */
 var ripples = {
-  init : function(withRipple) {
-    "use strict";
+    init : function(withRipple) {
+        "use strict";
 
-    // Helper to bind events on dynamically created elements
-    var bind = function(event, selector, callback) {
-      document.addEventListener(event, function(e) {
-        var target = (typeof e.detail !== "number") ? e.detail : e.target;
+        // animations time
+        var rippleOutTime = 100,
+            rippleStartTime = 500;
 
-        if (target.matches(selector)) {
-          callback(e, target);
-        }
-      });
-    };
+        // Helper to bind events on dynamically created elements
+        var bind = function(event, selector, callback) {
+            document.addEventListener(event, function(e) {
+                var target = (typeof e.detail !== "number") ? e.detail : e.target;
 
-    var rippleStart = function(e, target) {
+                if (target.matches(selector)) {
+                    callback(e, target);
+                }
+            });
+        };
 
-      // Init variables
-      var $rippleWrapper  = (target.matches(".ripple-wrapper")) ? target : target.parentNode,
-          $el             = $rippleWrapper.parentNode,
-          $ripple         = document.createElement("div"),
-          elPos           = $el.getBoundingClientRect(),
-          mousePos        = {x: e.clientX - elPos.left, y: e.clientY - elPos.top},
-          scale           = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
-          rippleEnd       = new CustomEvent("rippleEnd", {detail: $ripple}),
-          refreshElementStyle;
+        var rippleStart = function(e, target) {
 
-      // Set ripple class
-      $ripple.className = "ripple";
+            // Init variables
+            var $rippleWrapper  = (target.matches(".ripple-wrapper")) ? target : target.parentNode,
+                $el             = $rippleWrapper.parentNode,
+                $ripple         = document.createElement("div"),
+                elPos           = $el.getBoundingClientRect(),
+                mousePos        = {x: e.clientX - elPos.left, y: e.clientY - elPos.top},
+                scale           = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
+                rippleEnd       = new CustomEvent("rippleEnd", {detail: $ripple}),
+                refreshElementStyle;
 
-      // Move ripple to the mouse position
-      $ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
+            // Set ripple class
+            $ripple.className = "ripple";
 
-      // Insert new ripple into ripple wrapper
-      $rippleWrapper.appendChild($ripple);
+            // Move ripple to the mouse position
+            $ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
 
-      // Make sure the ripple has the class applied (ugly hack but it works)
-      refreshElementStyle = window.getComputedStyle($ripple).opacity;
+            // Insert new ripple into ripple wrapper
+            $rippleWrapper.appendChild($ripple);
 
-      // Let other funtions know that this element is animating
-      $ripple.dataset.animating = 1;
+            // Make sure the ripple has the class applied (ugly hack but it works)
+            refreshElementStyle = window.getComputedStyle($ripple).opacity;
 
-      // Set scale value to ripple and animate it
-      $ripple.className = "ripple ripple-on";
-      $ripple.setAttribute("style", $ripple.getAttribute("style") + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
+            // Let other funtions know that this element is animating
+            $ripple.dataset.animating = 1;
 
-      // This function is called when the animation is finished
-      setTimeout(function() {
+            // Set scale value to ripple and animate it
+            $ripple.className = "ripple ripple-on";
+            $ripple.setAttribute("style", $ripple.getAttribute("style") + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
 
-        // Let know to other functions that this element has finished the animation
-        $ripple.dataset.animating = 0;
-        document.dispatchEvent(rippleEnd);
+            // This function is called when the animation is finished
+            setTimeout(function() {
 
-      }, 500);
+                // Let know to other functions that this element has finished the animation
+                $ripple.dataset.animating = 0;
+                document.dispatchEvent(rippleEnd);
 
-    };
+            }, rippleStartTime);
 
-    var rippleOut = function($ripple) {
-      // Clear previous animation
-      $ripple.className = "ripple ripple-on ripple-out";
+        };
 
-      // Let ripple fade out (with CSS)
-      setTimeout(function() {
-        $ripple.remove();
-      }, 1000);
-    };
+        var rippleOut = function($ripple) {
+            // Clear previous animation
+            $ripple.className = "ripple ripple-on ripple-out";
 
-    // Helper, need to know if mouse is up or down
-    var mouseDown = false;
-    document.body.onmousedown = function() {
-      mouseDown = true;
-    };
-    document.body.onmouseup = function() {
-      mouseDown = false;
-    };
+            // Let ripple fade out (with CSS)
+            setTimeout(function() {
+                $ripple.remove();
+            }, rippleOutTime);
+        };
 
-    // Append ripple wrapper if not exists already
-    var rippleInit = function(e, target) {
+        // Helper, need to know if mouse is up or down
+        var mouseDown = false;
+        document.body.onmousedown = function() {
+            mouseDown = true;
+        };
+        document.body.onmouseup = function() {
+            mouseDown = false;
+        };
 
-      if (target.getElementsByClassName("ripple-wrapper").length === 0) {
-        target.className += " withripple";
-        var $rippleWrapper = document.createElement("div");
-        $rippleWrapper.className = "ripple-wrapper";
-        target.appendChild($rippleWrapper);
-        rippleStart(e, $rippleWrapper);
-      }
+        // Append ripple wrapper if not exists already
+        var rippleInit = function(e, target) {
 
-    };
+            if (target.getElementsByClassName("ripple-wrapper").length === 0) {
+                target.className += " withripple";
+                var $rippleWrapper = document.createElement("div");
+                $rippleWrapper.className = "ripple-wrapper";
+                target.appendChild($rippleWrapper);
+                rippleStart(e, $rippleWrapper);
+            }
 
-    // Events handler
-    // init RippleJS and start ripple effect on mousedown
-    bind("mousedown", withRipple, rippleInit);
-    // start ripple effect on mousedown
-    bind("mousedown", ".ripple-wrapper, .ripple", rippleStart);
-    // if animation ends and user is not holding mouse then destroy the ripple
-    bind("rippleEnd", ".ripple-wrapper, .ripple", function(e, $ripple) {
-      if (!mouseDown) {
-        rippleOut($ripple);
-      }
-    });
-    // Destroy ripple when mouse is not holded anymore if the ripple still exists
-    bind("mouseup", ".ripple-wrapper, .ripple", function(e, $ripple) {
-      if ($ripple.dataset.animating != 1) {
-        rippleOut($ripple);
-      }
-    });
+        };
 
-  }
+        // Events handler
+        // init RippleJS and start ripple effect on mousedown
+        bind("mousedown", withRipple, rippleInit);
+        // start ripple effect on mousedown
+        bind("mousedown", ".ripple-wrapper, .ripple", rippleStart);
+        // if animation ends and user is not holding mouse then destroy the ripple
+        bind("rippleEnd", ".ripple-wrapper, .ripple", function(e, $ripple) {
+            if (!mouseDown) {
+                rippleOut($ripple);
+            }
+        });
+        // Destroy ripple when mouse is not holded anymore if the ripple still exists
+        bind("mouseup", ".ripple-wrapper, .ripple", function(e, $ripple) {
+            if ($ripple.dataset.animating != 1) {
+                rippleOut($ripple);
+            }
+        });
+
+    }
 };