commit 59d36c47283477fea2cb6925de49518421e39933
author Henri Koivuneva <henri.koivuneva@gmail.com> Sat Aug 12 15:32:50 2017 +0300
committer Henri Koivuneva <henri.koivuneva@gmail.com> Sat Aug 12 15:32:50 2017 +0300
tree e91c0b29c09abde3a4d71974cdc17c38956d6dc1
parent 0f9881935534d02acb81e96bb4ba55c4f6117750

CSS: Speed up transitions

This way the transition between states is more noticeable and we'll now
avoid seeing the middle (less readable) state of the transition where
the text and background in buttons meld together.

css/style.css

diff --git a/css/style.css b/css/style.css
index f88b1fe..49fae2a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -60,6 +60,8 @@
   color: #ffffff; }
 
 a, .btn {
+  -webkit-transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
+  transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
 }
 
 a:hover, a:focus, a:active {text-decoration: none;}
@@ -82,8 +84,8 @@
   z-index: 100;
   margin-bottom: 0;
   border-radius: 0;
-  -webkit-transition: background-color 1s ease 0s;
-  transition: background-color 1s ease 0s; }
+  -webkit-transition: background-color .2s ease 0s;
+  transition: background-color .2s ease 0s; }
 
 .navbar-brand {
   display: none;
@@ -99,8 +101,8 @@
   margin: 9px 5px 5px 5px;
   border: 1px solid transparent;
   border-radius: 5px;
-  -webkit-transition: color 1s ease 0s, border-color 1s ease 0s;
-  transition: color 1s ease 0s, border-color 1s ease 0s; }
+  -webkit-transition: color .2s ease 0s, border-color .2s ease 0s;
+  transition: color .2s ease 0s, border-color .2s ease 0s; }
 .navbar-default .navbar-nav > li > a:hover {
   color: #ffffff;
   border: 1px solid #ffffff; }
@@ -133,18 +135,18 @@
 /* Solid class attached on scroll past first section */
 .navbar.solid {
   background-color: #07374a;
-  -webkit-transition: background-color 1s ease 0s;
-  transition: background-color 1s ease 0s;
+  -webkit-transition: background-color .2s ease 0s;
+  transition: background-color .2s ease 0s;
   box-shadow: 0 0 4px rgba(7, 55, 74, 0.2); }
   .navbar.solid .navbar-brand {
     display: inline-block;
     color: #ffffff;
-    -webkit-transition: color 1s ease 0s, border-color 1s ease 0s;
-    transition: color 1s ease 0s, border-color 1s ease 0s; }
+    -webkit-transition: color .2s ease 0s, border-color .2s ease 0s;
+    transition: color .2s ease 0s, border-color .2s ease 0s; }
   .navbar.solid .navbar-nav > li > a {
     color: #ffffff;
-    -webkit-transition: color 1s ease 0s, border-color 1s ease 0s;
-    transition: color 1s ease 0s, border-color 1s ease 0s; }
+    -webkit-transition: color .2s ease 0s, border-color .2s ease 0s;
+    transition: color .2s ease 0s, border-color .2s ease 0s; }
 
 .cover {
   padding: 10% 0 10% 0; }