Animation sieht jetzt gut aus

resources/assets/less/metager/sidebar.less

@@ -49,13 +49,14 @@
 
         &>label {
             font-size: 16px;
-            line-height: 20px;
+            font-weight: normal;
             text-decoration: none;
             text-indent: 12px;
+            color: black;
+            line-height: 20px;
             display: inline-block;
             width: 100%;
-            color: black;
-            font-weight: normal;
+            
             &:hover {
                 color: red;
             }
@@ -63,13 +64,15 @@
     }
 
     & .metager-dropdown-menu {
+        min-width: 160px;
+        max-height: 0px;
+        text-align: left;
         list-style-type: none;
         z-index: 1000;
         float: left;
-        min-width: 160px;
-        text-align: left;
-        max-height: 0px;
         overflow: hidden;
+        transition: 0.5s ease;
+
         &>li>a {
             display: block;
             font-size: 12px;
@@ -80,10 +83,12 @@
             line-height: 1.42857143;
             border-top: 1px solid LightGray;
             margin-left: 2px;
+
             &:hover {
                 text-decoration: none;
             }
         }
+
         label:after {
             #navbar-static-pages {
                 z-index: 4;
@@ -128,12 +133,10 @@
 
         &:checked {
             & ~.metager-dropdown-menu {
-                animation-name: dropdown-animation;
-                animation-duration: 0.7s;
-                animation-timing-function: ease-out;
-                animation-fill-mode: forwards;
-                animation-delay: 0.1s;
+                max-height: 1000px;
+                padding: 5px 0;
             }
+
             & ~ label > .caret {
                 border-top:0 solid;
                 border-bottom:4px solid;
@@ -143,10 +146,7 @@
 
         &:not(:checked) {
             & ~.metager-dropdown-menu {
-                animation-name: reverse-dropdown-animation;
-                animation-duration: 0.3s;
-                animation-timing-function: ease-in;
-                animation-fill-mode: forwards;
+                padding: 0px 0;
             }
         }
     }
@@ -188,34 +188,4 @@ input#nav0:checked {
     & ~.sideBar {
         right: 0px;
     }
-}
-
+}
\ No newline at end of file
-@keyframes dropdown-animation {
-    0% {
-        max-height: 0px;
-        padding: 0px 0;
-    }
-    1% {
-        padding: 5px 0;
-    }
-    100% {
-        max-height: 1000px;
-        padding: 5px 0;
-    }
-}
-
-@keyframes reverse-dropdown-animation {
-    0% {
-        max-height: 300px;
-        padding: 5px 0;
-    }
-    1% {
-        padding: 5px 0;
-    }
-    100% {
-        max-height: 0px;
-        padding: 0px 0;
-    }
-}
-
-