nicer intro animation

_src/_assets/javascripts/bigchain.js

@@ -15,4 +15,10 @@ jQuery(function($) {
     Forms.init();
     SmoothScroll.init();
 
+    $('.hero .logo').on('animationend webkitAnimationEnd oAnimationEnd',
+        function(e) {
+            $('.hero').addClass('is-ready');
+        }
+    );
+
 });

_src/_assets/styles/bigchain/_mixins/_buttons.scss

@@ -5,7 +5,7 @@
     $active-background: darken($background, 5%);
     $active-border: darken($border, 12%);
     color: $color !important;
-    background-color: $background;
+    background: $background;
 
     &:hover,
     &:focus {
@@ -14,11 +14,8 @@
     }
     &:active {
         color: $color !important;
-        background-color: darken($background, 30%);
+        background: darken($background, 10%);
         transition: none;
-
-        // Remove the gradient for the pressed/active state
-        background-image: none;
     }
     &.disabled,
     &:disabled {

_src/_assets/styles/page-front.scss

@@ -51,6 +51,8 @@
         color: #fff;
         font-size: $font-size-h1;
         margin-bottom: ($spacer * 3);
+
+        &:after { display: none }
     }
 
     .btn {
@@ -62,15 +64,29 @@
     }
 
     // intro animation
-    .logo,
+    .logo {
+        @extend .animation-slide-in-from-bottom;
+        animation-duration: 1s;
+        animation-timing-function: $timing-default;
+    }
+
     .section-title,
     .btn {
         @extend .animation-slide-in-from-bottom;
         animation-fill-mode: backwards;
+        animation-play-state: paused;
     }
 
-    .section-title { animation-delay: .2s; }
-    .btn           { animation-delay: .4s; }
+    .btn { animation-delay: .2s; }
+
+    &.is-ready {
+        .section-title,
+        .btn {
+            animation-play-state: running;
+        }
+    }
+
+
 }
 
 

_src/index.html

@@ -77,7 +77,7 @@ front_page: true
                 <label class="form-label" for="comment">Your Comment (optional)</label>
             </p>
             <p class="form-group">
-                <input class="btn btn-secondary" type="submit" value="Send">
+                <input class="btn btn-primary" type="submit" value="Send">
             </p>
         </form>
     </div>