zIndex problem fixed. animation faster

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "react-animated-menus",
-    "version": "1.0.4",
+    "version": "1.0.15",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-animated-menus",
-    "version": "1.0.15",
+    "version": "1.0.16",
     "description": "React component that mounts three dot button that morphs into a menu by clicking on it.",
     "main": "./lib/index.js",
     "license": "MIT",

src/components/Menu.js

@@ -99,7 +99,7 @@ class App extends Component {
           borderRadius: {
             value: 0,
             easing: "easeOutCubic",
-            duration: 900
+            duration: 400
           },
           duration: 400,
           easing: "easeInOutCubic",
@@ -110,10 +110,10 @@ class App extends Component {
           scaleX: [2.5,1],
           opacity: 1,
           duration: function(targetElements, i, l) {
-            return 400 + (i * 200);
+            return 300 + (i * 200);
           },
           easing: 'easeInOutCubic',
-          offset: '-=700'
+          offset: '-=300'
         });
     } else {
       animation = anime.timeline();
@@ -127,7 +127,7 @@ class App extends Component {
           targets: targetButton,
           scaleX: [1,2.5],
           duration: function(targetElements, i, l) {
-            return 400 + (i * 200);
+            return 300 + (i * 200);
           },
           opacity: 0,
           easing: 'easeInOutCubic'
@@ -143,7 +143,7 @@ class App extends Component {
           scaleX: [1,0.1],
           scaleY: [1,0.14],
           borderRadius: "100%",
-          duration: 700,
+          duration: 400,
           backgroundColor: this.getColor(),
           easing: "easeInOutCubic",
           offset: '-=500'
@@ -153,10 +153,10 @@ class App extends Component {
         animation.complete = function() {
           targetButton.forEach((element) => {
             element.style.display = "none";
-            element.style.zIndex = 1;
+            element.style.zIndex = 0;
           });
 
-          targetMenu.style.zIndex = 1;
+          targetMenu.style.zIndex = 0;
 
         };
     }

src/styles/Menu.css

@@ -4,7 +4,7 @@
   overflow: visible;
   transition: opacity 0.5s;
   cursor: pointer;
-  z-index: 1;
+  z-index: 0;
 }
 
 .ram-Menu_closed:hover {
@@ -62,7 +62,7 @@
   background-color: white;
   transition: background-color 0.5s, padding 0.5s;
   opacity: 0;
-  z-index: 1;
+  z-index: 0;
   padding-top: 25%;
   color: rgb(60, 60, 60);
 }