Menu delay question after modification



Does anybody can help me find out why is a delay when I open/close the menu.
I made some modification to make the menu 3d-ish, but now it’s slower than before.

Here is an example:

Here is my modification:

.menu-content {
    -o-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -webkit-transform: none !important;

    -webkit-transition: all 200ms linear !important;
    -moz-transition: all 200ms linear !important;
    -ms-transition: all 200ms linear !important;
    -o-transition: all 200ms linear !important;
    transition: all 200ms linear !important;
    -webkit-backface-visibility: hidden !important;

.menu-content-open {
    -webkit-transform: translate3d(270px,0,0) scale(0.75) !important;
    -moz-transform: translate3d(270px,0,0) scale(0.75) !important;
    -ms-transform: translate3d(270px,0,0) scale(0.75) !important;
    transform: translate3d(270px,0,0) scale(0.75) !important;


Nice modification.

What delay exactly?


When you press the open button. Roughly 1 sec. Just remove the additional css and compare with it.
In that case when you press it, opens immediately.


Please provide both as Plunkrs so we can compare without additional work.


Ther you go:



The opening delay seems to be caused by

    -o-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -webkit-transform: none !important;


Yeah, but in this case, it goes right first (original) and after down (my animation). It much worst.