out animation

frontlog.css

@@ -9,23 +9,31 @@ flogelem {
   display:block;
   border-width: 1px;
   border-style: solid;
+  border-radius: 8px;
   overflow: hidden;
   max-height: 0;
   margin-bottom: 0;
   padding: 0;
   opacity: 0;
-  -webkit-transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s;
-	-moz-transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s;
-  transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s;
+  position: relative;
+  bottom: 0;
+  -webkit-transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s, bottom 3s;
+	-moz-transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s, bottom 3s;
+  transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s, bottom 3s;
 }
 
 .flshow {
-  max-height: 100px!important;
+  max-height: 200px!important;
   margin-bottom: 1em;
   padding: 4px;
-  border-radius: 8px;
   opacity: 1;
 }
+.flvanish {
+  position: relative;
+  bottom: 3em;
+  max-height: 0 !important;
+  opacity: 0 !important;
+}
 
 fltitle {
   display: block;

frontlog.js

@@ -4,13 +4,15 @@ let frontlog = document.createElement('frontlog');
 document.body.appendChild(frontlog);
 
 let frontlogVanish = function(elem) {
-  elem.remove();
-  //TODO irgendwann hübscher machen
-  let elems = document.getElementsByTagName('flogelem');
-  if(elems.length < frontlogMaxEl && frontlogList.length) {
-    let p = frontlogList.shift();
-    frontlogPipe(p.title,p.icon,p.msg,p.col,p.time);
-  }
+  elem.classList.add('flvanish');
+  setTimeout(function() {
+    elem.remove();
+    let elems = document.getElementsByTagName('flogelem');
+    if(elems.length < frontlogMaxEl && frontlogList.length) {
+      let p = frontlogList.shift();
+      frontlogPipe(p.title,p.icon,p.msg,p.col,p.time);
+    }
+  },3100);
 }
 
 let frontlogAdd = function(title,icon,msg,col,time) {