跨浏览器的过渡和转换问题

Question

I'm having issues while building my new website.

I have a mobile nav that shows up whenever your browser is small enough (I believe under 940px wide) and it works fine on Chrome and other webkit browsers, but in Firefox and IE the transitions don't work and nothing transforms the way I want it to. I'm not really sure why this is and could use help.

Here's a link to the site: http://teamreest.com/

EDIT: I am using the specific vendor prefixes, yet it still does not work.

More specifically relating to this:

.overlay{
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  background: $main-color;
  overflow: auto;
  z-index:100;
  font-size:50px;
  font-weight:300;
  min-height:400px;

  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  -ms-transition: -ms-transform 0.4s;
  transition: -transform 0.4s;

  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
}

.overlay.show {
  opacity:1;

  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
}

Also this:

.container{
  height:100%;
  opacity: 1;

  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
  -moz-transition: -moz-transform 0.4s, opacity 0.4s;
  -ms-transition: -ms-transform 0.4s, opacity 0.4s;
  transition: -transform 0.4s, opacity 0.4s;
}

.container.show {
  opacity: 0.5;

  -webkit-transform: translateX(30%);
  -moz-transform: translateX(30%);
  -ms-transform: translateX(30%);
  transform: translateX(30%);
}

Answer 1

I found the issue in my code.

The transition as seen here:

  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  -ms-transition: -ms-transform 0.4s;
  transition: -transform 0.4s;

And here:

  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
  -moz-transition: -moz-transform 0.4s, opacity 0.4s;
  -ms-transition: -ms-transform 0.4s, opacity 0.4s;
  transition: -transform 0.4s, opacity 0.4s;

Are problematic. As seen, the regular transition property has an issue. That issue can be seen as there is a dash in front of the transform property of the transition. By removing this the problem is solved.