Merge pull request #560 from glowing-bear/improve-animation

Use transform to improve smootheness.

css/glowingbear.css

@@ -237,8 +237,8 @@ input[type=text], input[type=password], #sendMessage, .badge {
     bottom: 35px;      /* input bar */
     padding-top: 42px; /* topbar */
     padding-bottom: 7px;
-    -webkit-transition:0.35s ease all;
-    transition:0.35s ease all;
+    -webkit-transition:0.2 ease-in-out all;
+    transition:0.2s ease-in-out all;
 }
 #bufferlines > table {
     margin-top: 35px;
@@ -281,8 +281,8 @@ td.time {
     bottom: 0;
     height: 35px;
     width: 100%;
-    -webkit-transition:0.35s ease all;
-    transition:0.35s ease all;
+    -webkit-transition:0.2s ease-in-out all;
+    transition:0.2s ease-in-out all;
     z-index: 1;
 }
 .content[sidebar-state=visible] .footer {
@@ -345,8 +345,8 @@ table.notimestampseconds td.time span.seconds {
 }
 
 #sidebar .showquickkeys .buffer .buffer-quick-key {
-    transition: all ease 0.5s;
-    -webkit-transition: all ease 0.5s;
+    transition: all ease-in-out 0.5s;
+    -webkit-transition: all ease-in-out 0.5s;
     transition-delay: 0.2s;
     -webkit-transition-delay: 0.2s;
     opacity: 0.7;
@@ -355,8 +355,8 @@ table.notimestampseconds td.time span.seconds {
     margin-left: -0.7em;
     margin-right: -0.2em;
     font-size: smaller;
-    transition: all ease 0.5s;
-    -webkit-transition: all ease 0.5s;
+    transition: all ease-in-out 0.5s;
+    -webkit-transition: all ease-in-out 0.5s;
     opacity: 0;
     text-shadow: -1px 0px 4px rgba(255, 255, 255, 0.4),
     0px -1px 4px rgba(255, 255, 255, 0.4),
@@ -562,6 +562,7 @@ img.emoji {
         bottom: 0px;
         top: 0px;
         padding-bottom: 35px;
+        width: 200px;
     }
 
     #sidebar.in, #sidebar.collapsing {
@@ -571,15 +572,16 @@ img.emoji {
     }
 
     #sidebar[data-state=visible] {
-        width: 200px;
+        transform: translate(0,0);
     }
 
     #sidebar[data-state=hidden] {
-        left: -200px;
+        transform: translate(-200px,0);
     }
 
     .content[sidebar-state=visible] #bufferlines, .content[sidebar-state=visible] .footer {
         margin-left: 0px;
+        transform: translate(200px,0);
     }
 
     #topbar .title {