Javascript Easing

transition: margin-top,max-width .7s ease-in-out !Important;

You are applying the transition property to two properties but specify only one duration (etc.). This is how Firefox interprets that:

Notice how the first duration is always 0s? That’s the issue (always look into the debugger and CSS analyzer, etc. first)!

Fortunately, Firefox also reformats the property in such a way that we know how to change the syntax and apply the values correctly:

transition: margin-top .7s ease-in-out,max-width .7s ease-in-out !important;

Now both transition properties have a duration and both have a timing function. Apply this to all your rules that use multiple transition properties and the transition at least works. Now you only need to tweak the values a bit and you should be fine.

Also: it’s !important, not !Important.

You can set the duration of the animation when calling toggleClass by passing an additional parameter representing the number of milliseconds of the animation.

Instead of calling:

<script type="text/javascript">jQuery(document).ready(function($) {$('.ubermenu-skin-vanilla.ubermenu-responsive-toggle').click(function(){$('#logo').toggleClass('logo1');$('#logo').toggleClass('logo2');});});</script>

try to use something like

<script type="text/javascript">jQuery(document).ready(function($) {$('.ubermenu-skin-vanilla.ubermenu-responsive-toggle').click(function(){$('#logo').toggleClass('logo1',1000);$('#logo').toggleClass('logo2', 1000);});});</script>