ux improvements for erros.

resources/public/css/main.css

@@ -14,10 +14,17 @@
     @keyframes appear {
         from { opacity: 0;  }
     }
+    @keyframes slideOut {
+        to {
+            -webkit-transform: translateY(10px);
+            transform: translateY(10px);
+            opacity: 0;
+        }
+    }
     @keyframes slideIn {
     from {
-    -webkit-transform: translateY(-100%);
-    transform: translateY(-100%);
+    -webkit-transform: translateY(-10px);
+    transform: translateY(-10px);
     opacity: 0;
     }
     }
@@ -113,6 +120,36 @@
         }
     }
 
+    @keyframes grow-height {
+        from {
+            height: 0px;
+            opacity: 0;
+        }
+    }
+
+    @keyframes shrink-height {
+        to {
+            height: 0px;
+            opacity: 0;
+        }
+    }
+
+
+    .appear {
+        animation: slideIn 0.2s ease both;
+    }
+
+    .disappear {
+        animation: slideOut 0.2s ease both;
+    }
+
+    .slide-in-top {
+        animation: grow-height 0.5s ease both;
+    }
+    .slide-out-top {
+        animation: shrink-height 0.5s ease both;
+    }
+
     .slide-in-right {
         animation: grow-width 0.5s ease both;
     }