Add animation to menu

1 files changed, 70 insertions, 0 deletions

diff --git a/styles.css b/styles.css
index ccd6e6f..e2a931d 100644
--- a/styles.css
+++ b/styles.css
@@ -87,7 +87,77 @@ label[for=navbar-toggle-cbox] {
 
 #navbar-toggle-cbox:checked ~ .navbar-menu {
     display: block;
+    -webkit-animation: bounceInDown 1s both;
+    -moz-animation: bounceInDown 1s both;
+    -o-animation: bounceInDown 1s both;
+    animation: bounceInDown 1s both;
 }
+
+@-webkit-keyframes bounceInDown {
+    0% {
+        opacity: 0;
+        -webkit-transform: translateY(-2000px);
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: translateY(30px);
+    }
+    80% {
+        -webkit-transform: translateY(-10px);
+    }
+    100% {
+        -webkit-transform: translateY(0);
+    }
+}
+@-moz-keyframes bounceInDown {
+    0% {
+        opacity: 0;
+        -moz-transform: translateY(-2000px);
+    }
+    60% {
+        opacity: 1;
+        -moz-transform: translateY(30px);
+    }
+    80% {
+        -moz-transform: translateY(-10px);
+    }
+    100% {
+        -moz-transform: translateY(0);
+    }
+}
+@-o-keyframes bounceInDown {
+    0% {
+        opacity: 0;
+        -o-transform: translateY(-2000px);
+    }
+    60% {
+        opacity: 1;
+        -o-transform: translateY(30px);
+    }
+    80% {
+        -o-transform: translateY(-10px);
+    }
+    100% {
+        -o-transform: translateY(0);
+    }
+}
+@keyframes bounceInDown {
+    0% {
+        opacity: 0;
+        transform: translateY(-2000px);
+    }
+    60% {
+        opacity: 1;
+        transform: translateY(30px);
+    }
+    80% {
+        transform: translateY(-10px);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
+
 /* --------- End Menu Mobile sin JS ----------- */
 
 /* ---------   Menu Mobile JS  ------------ */