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; }
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:
Alors que Safari le “sépare” (ce qui peut ne pas être attendu):
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.