Added CSS transitions

style.css

@@ -55,6 +55,8 @@ body {
   height: 100%;
   width: auto;
   border-left: 9px solid #fff;
+  -webkit-transition: margin 0.5s ease, border-color 0.2s ease;
+  transition: margin 0.5s ease, border-color 0.2s ease;
 }
 
 #content div#container div#reflection {
@@ -64,6 +66,8 @@ body {
   bottom: 0;
   width: 100%;
   height: 100%;
+  -webkit-transition: margin 0.5s ease;
+  transition: margin 0.5s ease;
 }
 
 #content .col {
@@ -71,6 +75,9 @@ body {
   height: 70px;
   width: 70px;
   cursor: pointer;
+  -webkit-transition: background-color 0.2s ease;
+  transition: background-color 0.2s ease;
+  background-color: #fff;
 }
 
 #content .col:nth-child(n + 2) {

style.css.map

@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "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",
+    "mappings": "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",
     "sources": [
         "style.scss"
     ],

style.scss

@@ -54,6 +54,7 @@ body {
       height: 100%;
       width: auto;
       border-left: 9px solid #fff;
+      transition: margin 0.5s ease, border-color 0.2s ease;
     }
 
     div#reflection {
@@ -63,6 +64,7 @@ body {
       bottom: 0;
       width: 100%;
       height: 100%;
+      transition: margin 0.5s ease;
     }
   }
 
@@ -71,6 +73,8 @@ body {
     height: 70px;
     width: 70px;
     cursor: pointer;
+    transition: background-color 0.2s ease;
+    background-color: #fff;
 
     &:nth-child(n + 2) {
       margin-left: 4px;