Comment appliquer la transition CSS3 à toutes les propriétés sauf la position de fond?

Je voudrais appliquer une transition CSS à toutes les propriétés en dehors de la position d’arrière-plan. 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; } 

Tout d’abord, je définis toutes les propriétés sur la transition et j’ai ensuite essayé de remplacer 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.

Est-il possible de faire cela sans lister toutes les propriétés?

Voici une solution qui fonctionne également sur Firefox:

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

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

J’espère ne pas être en retard. Cela se fait 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/

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

Essayer:

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

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

Vous pouvez essayer d’utiliser la méthode standard W3C:

 .transition { transition: all 0.2s, top 0s, left 0s, width 0s, height 0s; } 

http://jsfiddle.net/H2jet/60/

Pour quiconque cherche un moyen raccourci, pour append une transition pour toutes les propriétés, sauf pour une propriété spécifique avec délai , sachez qu’il existe des différences entre les navigateurs même modernes.

Une simple démonstration ci-dessous montre la différence. Découvrez le code complet

 div:hover { width: 500px; height: 500px; border-radius: 0; transition: all 2s, border-radius 2s 4s; } 

Chrome va “combiner” les deux animations (ce qui est comme prévu), comme ci-dessous:

entrer la description de l'image ici

Alors que Safari le “sépare” (ce qui peut ne pas être attendu):

entrer la description de l'image ici

Une méthode plus compatible consiste à atsortingbuer la transition spécifique à une propriété spécifique, si vous avez un retard pour l’une d’entre elles.