CSS3 transition ne fonctionne pas dans firefox

Question

Dans le site Web (www.kkbio.co.uk) j'ai créé un script qui fixe la barre de navigation sur le dessus et le logo change en version plus petite par transition CSS3. Cela fonctionne dans Google Chrome, mais dans Firefox ce n'est pas le cas. Les autres transitions ne fonctionnent pas aussi. Je ne sais pas pourquoi) Aidez-moi s'il vous plaît :)

par exemple:

.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

On dirait que vous avez quelques problèmes ici ...

Vous avez utilisé !important qui est presque toujours un mauvais signe, et vous l'avez utilisé deux fois sur le même élément, donc quelle règle est plus!important?

Évitez d'utiliser !important autant que possible. Dans ce cas, il semble que vous ne pouvez l'éviter en utilisant:

<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> 

plutôt que:

<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 remplira les valeurs par défaut si vous utilisez sténographies comme background donc, tout en se lit Chrome:

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

Firefox se lit comme suit:

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

Working Example