diff --git a/css/sonar.css b/css/sonar.css
index 19f1bfc..9d15def 100644
--- a/css/sonar.css
+++ b/css/sonar.css
@@ -166,6 +166,30 @@ Copyright (c) 2015 Alejandro U. Alvarez
   -o-animation-delay: 0.25s;
   animation-delay: 0.25s;
 }
+.sonar.sonar-slow::after {
+  -webkit-animation-duration: 2s;
+  -moz-animation-duration: 2s;
+  -o-animation-duration: 2s;
+  animation-duration: 2s;
+}
+.sonar.sonar-slower::after {
+  -webkit-animation-duration: 4s;
+  -moz-animation-duration: 4s;
+  -o-animation-duration: 4s;
+  animation-duration: 4s;
+}
+.sonar.sonar-fast::after {
+  -webkit-animation-duration: 0.5s;
+  -moz-animation-duration: 0.5s;
+  -o-animation-duration: 0.5s;
+  animation-duration: 0.5s;
+}
+.sonar.sonar-faster::after {
+  -webkit-animation-duration: 0.25s;
+  -moz-animation-duration: 0.25s;
+  -o-animation-duration: 0.25s;
+  animation-duration: 0.25s;
+}
 .sonar.sonar-stroke::after {
   border-width: 0;
   border-color: inherit;
@@ -205,10 +229,6 @@ Copyright (c) 2015 Alejandro U. Alvarez
   -moz-animation-name: sonar-base, sonar-stroke;
   -o-animation-name: sonar-base, sonar-stroke;
   animation-name: sonar-base, sonar-stroke;
-  -webkit-animation-duration: 1s;
-  -moz-animation-duration: 1s;
-  -o-animation-duration: 1s;
-  animation-duration: 1s;
 }
 .sonar.sonar-stroke.sonar-click::after {
   -webkit-animation-name: none;
@@ -221,10 +241,6 @@ Copyright (c) 2015 Alejandro U. Alvarez
   -moz-animation-name: sonar-base, sonar-stroke;
   -o-animation-name: sonar-base, sonar-stroke;
   animation-name: sonar-base, sonar-stroke;
-  -webkit-animation-duration: 1s;
-  -moz-animation-duration: 1s;
-  -o-animation-duration: 1s;
-  animation-duration: 1s;
 }
 .sonar.sonar-fill::after {
   border: none;
diff --git a/css/sonar.min.css b/css/sonar.min.css
index 052f775..83121e6 100644
--- a/css/sonar.min.css
+++ b/css/sonar.min.css
@@ -6,5 +6,5 @@ Copyright (c) 2015 Alejandro U. Alvarez
 sonar.css - http://urbanoalvarez.es/sonar.css/
 Licensed under the MIT license - http://opensource.org/licenses/MIT
 Copyright (c) 2015 Alejandro U. Alvarez
-*/@-webkit-keyframes sonar-base{from{padding:0;opacity:0.6}to{padding:15px;opacity:0;top:-15px;left:-15px}}@-moz-keyframes sonar-base{from{padding:0;opacity:0.6}to{padding:15px;opacity:0;top:-15px;left:-15px}}@-o-keyframes sonar-base{from{padding:0;opacity:0.6}to{padding:15px;opacity:0;top:-15px;left:-15px}}@keyframes sonar-base{from{padding:0;opacity:0.6}to{padding:15px;opacity:0;top:-15px;left:-15px}}@-webkit-keyframes sonar-stroke{from{border-width:5px;margin:-5px}to{border-width:1px;top:-15px;left:-15px}}@-moz-keyframes sonar-stroke{from{border-width:5px;margin:-5px}to{border-width:1px;top:-15px;left:-15px}}@-o-keyframes sonar-stroke{from{border-width:5px;margin:-5px}to{border-width:1px;top:-15px;left:-15px}}@keyframes sonar-stroke{from{border-width:5px;margin:-5px}to{border-width:1px;top:-15px;left:-15px}}.sonar{position:relative}.sonar::after{z-index:-1;padding:0px;top:0;left:0;width:100%;height:100%;content:'';display:block;position:absolute;-webkit-animation-name:sonar-base;-moz-animation-name:sonar-base;-o-animation-name:sonar-base;animation-name:sonar-base;-webkit-animation-iteration-count:1;-moz-animation-iteration-count:1;-o-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;-o-box-sizing:content-box;box-sizing:content-box}.sonar.sonar-infinite::after{-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;-o-animation-iteration-count:infinite;animation-iteration-count:infinite}.sonar.sonar-delay::after{-webkit-animation-delay:1s;-moz-animation-delay:1s;-o-animation-delay:1s;animation-delay:1s}.sonar.sonar-delay-long::after{-webkit-animation-delay:2s;-moz-animation-delay:2s;-o-animation-delay:2s;animation-delay:2s}.sonar.sonar-delay-longer::after{-webkit-animation-delay:4s;-moz-animation-delay:4s;-o-animation-delay:4s;animation-delay:4s}.sonar.sonar-delay-short::after{-webkit-animation-delay:0.5s;-moz-animation-delay:0.5s;-o-animation-delay:0.5s;animation-delay:0.5s}.sonar.sonar-delay-shorter::after{-webkit-animation-delay:0.25s;-moz-animation-delay:0.25s;-o-animation-delay:0.25s;animation-delay:0.25s}.sonar.sonar-stroke::after{border-width:0;border-color:inherit;border-style:solid;border-radius:inherit;-webkit-animation-name:sonar-base, sonar-stroke;-moz-animation-name:sonar-base, sonar-stroke;-o-animation-name:sonar-base, sonar-stroke;animation-name:sonar-base, sonar-stroke}.sonar.sonar-stroke.sonar-hover::after{-webkit-animation-name:none;-moz-animation-name:none;-o-animation-name:none;animation-name:none}.sonar.sonar-stroke.sonar-hover.sonar-default::after{border-color:#555}.sonar.sonar-stroke.sonar-hover.sonar-primary::after{border-color:#337ab7}.sonar.sonar-stroke.sonar-hover.sonar-info::after{border-color:#5bc0de}.sonar.sonar-stroke.sonar-hover.sonar-success::after{border-color:#5cb85c}.sonar.sonar-stroke.sonar-hover.sonar-warning::after{border-color:#f0ad4e}.sonar.sonar-stroke.sonar-hover.sonar-danger::after{border-color:#d9534f}.sonar.sonar-stroke.sonar-hover:hover::after{-webkit-animation-name:sonar-base, sonar-stroke;-moz-animation-name:sonar-base, sonar-stroke;-o-animation-name:sonar-base, sonar-stroke;animation-name:sonar-base, sonar-stroke;-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s}.sonar.sonar-stroke.sonar-click::after{-webkit-animation-name:none;-moz-animation-name:none;-o-animation-name:none;animation-name:none}.sonar.sonar-stroke.sonar-click:focus::after{-webkit-animation-name:sonar-base, sonar-stroke;-moz-animation-name:sonar-base, sonar-stroke;-o-animation-name:sonar-base, sonar-stroke;animation-name:sonar-base, sonar-stroke;-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s}.sonar.sonar-fill::after{border:none;background:inherit;border-radius:inherit;-webkit-animation-name:sonar-base;-moz-animation-name:sonar-base;-o-animation-name:sonar-base;animation-name:sonar-base}.sonar.sonar-fill.sonar-default::after{background-color:#555}.sonar.sonar-fill.sonar-primary::after{background-color:#337ab7}.sonar.sonar-fill.sonar-info::after{background-color:#5bc0de}.sonar.sonar-fill.sonar-success::after{background-color:#5cb85c}.sonar.sonar-fill.sonar-warning::after{background-color:#f0ad4e}.sonar.sonar-fill.sonar-danger::after{background-color:#d9534f}.sonar.sonar-fill.sonar-hover::after{-webkit-animation-name:none;-moz-animation-name:none;-o-animation-name:none;animation-name:none}.sonar.sonar-fill.sonar-hover:hover::after{-webkit-animation-name:sonar-base;-moz-animation-name:sonar-base;-o-animation-name:sonar-base;animation-name:sonar-base;-webkit-animation-duration:0.5s;-moz-animation-duration:0.5s;-o-animation-duration:0.5s;animation-duration:0.5s}.sonar.sonar-fill.sonar-click::after{-webkit-animation-name:none;-moz-animation-name:none;-o-animation-name:none;animation-name:none}.sonar.sonar-fill.sonar-click:focus::after{-webkit-animation-name:sonar-base;-moz-animation-name:sonar-base;-o-animation-name:sonar-base;animation-name:sonar-base;-webkit-animation-duration:0.5s;-moz-animation-duration:0.5s;-o-animation-duration:0.5s;animation-duration:0.5s}
+*/@-webkit-keyframes sonar-base{from{padding:0;opacity:0.6}to{padding:15px;opacity:0;top:-15px;left:-15px}}@-moz-keyframes sonar-base{from{padding:0;opacity:0.6}to{padding:15px;opacity:0;top:-15px;left:-15px}}@-o-keyframes sonar-base{from{padding:0;opacity:0.6}to{padding:15px;opacity:0;top:-15px;left:-15px}}@keyframes sonar-base{from{padding:0;opacity:0.6}to{padding:15px;opacity:0;top:-15px;left:-15px}}@-webkit-keyframes sonar-stroke{from{border-width:5px;margin:-5px}to{border-width:1px;top:-15px;left:-15px}}@-moz-keyframes sonar-stroke{from{border-width:5px;margin:-5px}to{border-width:1px;top:-15px;left:-15px}}@-o-keyframes sonar-stroke{from{border-width:5px;margin:-5px}to{border-width:1px;top:-15px;left:-15px}}@keyframes sonar-stroke{from{border-width:5px;margin:-5px}to{border-width:1px;top:-15px;left:-15px}}.sonar{position:relative}.sonar::after{z-index:-1;padding:0px;top:0;left:0;width:100%;height:100%;content:'';display:block;position:absolute;-webkit-animation-name:sonar-base;-moz-animation-name:sonar-base;-o-animation-name:sonar-base;animation-name:sonar-base;-webkit-animation-iteration-count:1;-moz-animation-iteration-count:1;-o-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;-o-box-sizing:content-box;box-sizing:content-box}.sonar.sonar-infinite::after{-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;-o-animation-iteration-count:infinite;animation-iteration-count:infinite}.sonar.sonar-delay::after{-webkit-animation-delay:1s;-moz-animation-delay:1s;-o-animation-delay:1s;animation-delay:1s}.sonar.sonar-delay-long::after{-webkit-animation-delay:2s;-moz-animation-delay:2s;-o-animation-delay:2s;animation-delay:2s}.sonar.sonar-delay-longer::after{-webkit-animation-delay:4s;-moz-animation-delay:4s;-o-animation-delay:4s;animation-delay:4s}.sonar.sonar-delay-short::after{-webkit-animation-delay:0.5s;-moz-animation-delay:0.5s;-o-animation-delay:0.5s;animation-delay:0.5s}.sonar.sonar-delay-shorter::after{-webkit-animation-delay:0.25s;-moz-animation-delay:0.25s;-o-animation-delay:0.25s;animation-delay:0.25s}.sonar.sonar-slow::after{-webkit-animation-duration:2s;-moz-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s}.sonar.sonar-slower::after{-webkit-animation-duration:4s;-moz-animation-duration:4s;-o-animation-duration:4s;animation-duration:4s}.sonar.sonar-fast::after{-webkit-animation-duration:0.5s;-moz-animation-duration:0.5s;-o-animation-duration:0.5s;animation-duration:0.5s}.sonar.sonar-faster::after{-webkit-animation-duration:0.25s;-moz-animation-duration:0.25s;-o-animation-duration:0.25s;animation-duration:0.25s}.sonar.sonar-stroke::after{border-width:0;border-color:inherit;border-style:solid;border-radius:inherit;-webkit-animation-name:sonar-base, sonar-stroke;-moz-animation-name:sonar-base, sonar-stroke;-o-animation-name:sonar-base, sonar-stroke;animation-name:sonar-base, sonar-stroke}.sonar.sonar-stroke.sonar-hover::after{-webkit-animation-name:none;-moz-animation-name:none;-o-animation-name:none;animation-name:none}.sonar.sonar-stroke.sonar-hover.sonar-default::after{border-color:#555}.sonar.sonar-stroke.sonar-hover.sonar-primary::after{border-color:#337ab7}.sonar.sonar-stroke.sonar-hover.sonar-info::after{border-color:#5bc0de}.sonar.sonar-stroke.sonar-hover.sonar-success::after{border-color:#5cb85c}.sonar.sonar-stroke.sonar-hover.sonar-warning::after{border-color:#f0ad4e}.sonar.sonar-stroke.sonar-hover.sonar-danger::after{border-color:#d9534f}.sonar.sonar-stroke.sonar-hover:hover::after{-webkit-animation-name:sonar-base, sonar-stroke;-moz-animation-name:sonar-base, sonar-stroke;-o-animation-name:sonar-base, sonar-stroke;animation-name:sonar-base, sonar-stroke}.sonar.sonar-stroke.sonar-click::after{-webkit-animation-name:none;-moz-animation-name:none;-o-animation-name:none;animation-name:none}.sonar.sonar-stroke.sonar-click:focus::after{-webkit-animation-name:sonar-base, sonar-stroke;-moz-animation-name:sonar-base, sonar-stroke;-o-animation-name:sonar-base, sonar-stroke;animation-name:sonar-base, sonar-stroke}.sonar.sonar-fill::after{border:none;background:inherit;border-radius:inherit;-webkit-animation-name:sonar-base;-moz-animation-name:sonar-base;-o-animation-name:sonar-base;animation-name:sonar-base}.sonar.sonar-fill.sonar-default::after{background-color:#555}.sonar.sonar-fill.sonar-primary::after{background-color:#337ab7}.sonar.sonar-fill.sonar-info::after{background-color:#5bc0de}.sonar.sonar-fill.sonar-success::after{background-color:#5cb85c}.sonar.sonar-fill.sonar-warning::after{background-color:#f0ad4e}.sonar.sonar-fill.sonar-danger::after{background-color:#d9534f}.sonar.sonar-fill.sonar-hover::after{-webkit-animation-name:none;-moz-animation-name:none;-o-animation-name:none;animation-name:none}.sonar.sonar-fill.sonar-hover:hover::after{-webkit-animation-name:sonar-base;-moz-animation-name:sonar-base;-o-animation-name:sonar-base;animation-name:sonar-base;-webkit-animation-duration:0.5s;-moz-animation-duration:0.5s;-o-animation-duration:0.5s;animation-duration:0.5s}.sonar.sonar-fill.sonar-click::after{-webkit-animation-name:none;-moz-animation-name:none;-o-animation-name:none;animation-name:none}.sonar.sonar-fill.sonar-click:focus::after{-webkit-animation-name:sonar-base;-moz-animation-name:sonar-base;-o-animation-name:sonar-base;animation-name:sonar-base;-webkit-animation-duration:0.5s;-moz-animation-duration:0.5s;-o-animation-duration:0.5s;animation-duration:0.5s}
 /*# sourceMappingURL=sonar.min.css.map */
diff --git a/index.html b/index.html
index 43189f2..71c4f27 100644
--- a/index.html
+++ b/index.html
@@ -100,9 +100,9 @@ <h1 class="title">sonar.<span class="text-muted" style="color:#ccc">s</span>css<
         </p>
     </div>
     <div class="container text-left" style="margin-top:50px;">
-        <h2 class="text-center">documentation</h2>
+        <h2 class="text-center sonar sonar-stroke sonar-primary sonar-delay-longer">documentation</h2>
         
-        <div class="row" style="margin-top:30px">
+        <div class="row" style="margin-top:150px">
           <div class="col-md-6 col-xs-6">
             <h4 id="getting-started"><a href="#getting-started">#</a> Getting started</h4>
             <p>Add <code>sonar</code> as a class to any element to activate.</p>
@@ -168,7 +168,7 @@ <h4 id="colors"><a href="#colors">#</a> Colors</h4>
           </div>
         </div>
 
-        <div style="margin-top:150px;"></div>
+        <div style="margin-top:250px;"></div>
     </div>
 </body>
 
diff --git a/sass/sonar.scss b/sass/sonar.scss
index 2825641..a464d17 100644
--- a/sass/sonar.scss
+++ b/sass/sonar.scss
@@ -58,6 +58,26 @@
       @include prefixer(animation-delay, $time-faster);
     }
   }
+  &.sonar-slow{
+    &::after{
+      @include prefixer(animation-duration, $time-slow);
+    }
+  }
+  &.sonar-slower{
+    &::after{
+      @include prefixer(animation-duration, $time-slower);
+    }
+  }
+  &.sonar-fast{
+    &::after{
+      @include prefixer(animation-duration, $time-fast);
+    }
+  }
+  &.sonar-faster{
+    &::after{
+      @include prefixer(animation-duration, $time-faster);
+    }
+  }
   &.sonar-stroke {
     &::after {
       border-width: 0;
@@ -104,7 +124,6 @@
       &:hover {
         &::after {
           @include animation("sonar-base, sonar-stroke");
-          @include prefixer(animation-duration, $duration-base);
         }
       }
     }
@@ -115,7 +134,6 @@
       &:focus {
         &::after {
           @include animation("sonar-base, sonar-stroke");
-          @include prefixer(animation-duration, $duration-base);
         }
       }
     }