CSS3 transition don't work in firefox

Question

In web-site (www.kkbio.co.uk) i created a script that fix navigation bar on top and the logo is changing to smaller version by CSS3 transition. It's working in google chrome, but in firefox it isn't. Other transitions don't work too. I don't know why) Help me please:)

for example:

.navbar-brand {
    margin-right: 0px;
    padding: 0;
    width: 342px;
    height: 82px;
    margin-left: 15p‌​x;
    margin-top: 15px;
    -moz-transition: height 0.5s, background-position 0.5s, margin-top 0.5s ease;
    -webkit-transition: height 0.5s, background-position 0.5s, margin-top 0.5s ease;
    -o-transition: height 0.5s, background-position 0.5s, margin-top 0.5s ease;
    transition: height 0.5s, background-position 0.5s, margin-top 0.5s ease;
}

.fixed .navbar-brand {
    height: 74px;
    margin-top: -5px;
    background-position: 0 -82px!important;
}

<a class="navbar-brand" href="http://kkbio.co.uk/" style="background-image:url(http://kkbio.co.uk/wp-content/uploads/2013/08/copy-logo1.png);"></a>

Answer 1

It looks like you've got a few problems here...

You've used !important which is almost always a bad sign, and you've used it twice on the same element, so which rule is more !important?

Avoid using !important whenever possible. In this case it looks like you can avoid it by using:

<a class="navbar-brand" href="http://kkbio.co.uk/" style="background-image: url(http://kkbio.co.uk/wp-content/uploads/2013/08/copy-logo1.png);"></a>

rather than:

<a class="navbar-brand" href="http://kkbio.co.uk/" style="background:url(http://kkbio.co.uk/wp-content/uploads/2013/08/copy-logo1.png);"></a>

Firefox will fill in default values if you use shorthands like background so, while Chrome reads:

background: url(http://kkbio.co.uk/wp-content/uploads/2013/08/copy-logo1.png);

Firefox reads:

background: url(http://kkbio.co.uk/wp-content/uploads/2013/08/copy-logo1.png) repeat scroll 0% 0% transparent;

Working Example