Comment appliquer la transition CSS3 à toutes les propriétés sauf la position d'arrière-plan?

Question

J'aimerais appliquer une transition CSS à toutes les propriétés en dehors de background-position. J'ai essayé de le faire de cette façon:

 .csstransitions a {
    -webkit-transition: all 0.3s ease;                  
    -moz-transition: all 0.3s ease;                 
    -o-transition: all 0.3s ease;   
    -ms-transition: all 0.3s ease;          
    transition: all 0.3s ease;
}

.csstransitions a {
    -webkit-transition: background-position 0s ease 0s;                 
    -moz-transition: background-position 0s ease 0s;                
    -o-transition: background-position 0s ease 0s;  
    -ms-transition: background-position 0s ease 0s;         
    transition: background-position 0s ease 0s;
}
 

J'ai d'abord défini toutes les propriétés sur la transition, puis j'ai essayé d'écraser uniquement la transition pour la propriété background-position.

Cependant, cela semble également réinitialiser toutes les autres propriétés - donc, fondamentalement, aucune des transitions ne semble se produire.

Y at-il un moyen de faire cela sans énumérer toutes les propriétés?

Answer 1

Voici une solution qui fonctionne aussi sur Firefox:

 transition: all 0.3s ease, background-position 1ms;
 

J'ai fait une petite démo: http://jsfiddle.net/aWzwh/

Answer 2

J'espère ne pas être en retard. Il est accompli en utilisant une seule ligne!

 -webkit-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-moz-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-o-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0; 
 

Cela fonctionne sur Chrome. Vous devez séparer les propriétés CSS par une virgule.

Voici un exemple de travail: http://jsfiddle.net/H2jet/

Answer 3

Essaye ça...

 * {
    transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
}
a {
    -webkit-transition: background-position 1ms linear;
    -moz-transition: background-position 1ms linear;
    -o-transition: background-position 1ms linear;
    transition: background-position 1ms linear;
}
 

Answer 4

Essayer:

 -webkit-transition: all .2s linear, background-position 0;
 

Cela a fonctionné pour moi sur quelque chose de similaire ..