Add CSS animations

groupchat/static/style.css

@@ -33,6 +33,7 @@ main {
   width: 100%;
   overflow-x: hidden;
   overflow-y: scroll;
+  transition: all 500ms ease;
   
 }
 
@@ -63,6 +64,11 @@ main {
   margin-top: 0.25em;
 }
 
+@keyframes incoming {
+  from {transform: translateY(-10vh); opacity: 0;}
+  to {transform: translateY(0vh); opacity: 1;}
+}
+
 
 #timeline .post {
   background-color: rgba(200, 200, 250, 1);
@@ -73,6 +79,8 @@ main {
   border-radius: 0.5em;
   font-size: 1em;
   margin-bottom: 0.3em;
+  animation-name: incoming;
+  animation-duration: 300ms;
 }
 
 #timeline .post.my-post {