Comment appliquer la transition CSS3 à toutes les propriétés sauf background-position?

109

Je voudrais appliquer une transition CSS à toutes les propriétés à l'exception 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é de remplacer uniquement la transition de la propriété background-position.

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

Existe-t-il un moyen de faire cela sans lister toutes les propriétés?

css css-transitions Dîner
la source
1
Salut, je suis à la recherche de ce problème. Avez-vous obtenu une réponse acceptable?
Milche Patern

Réponses:

144

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/

Félix Edelmann
la source
3
Pour une raison quelconque, cela 1msn'a pas fonctionné pour moi, mais 0cela a fonctionné.
Flimm
@Flimm, quel navigateur utilisez-vous? Et que voulez-vous dire par "n'a pas fonctionné", n'a rien animé?
Felix Edelmann
1
Pour moi 1ms, ça n'a pas fonctionné, mais ça l' a 1ms nonefait! @ericsoco 0msou 0sfonctionne aussi.
BCoder le
3
Les unités de temps DOIVENT avoir une unité. Donc, 0 ne fonctionne pas, tout comme 4 ne fonctionnera pas, mais les 4 fonctionneront tout comme les 0 fonctionneront.
ESR
2
J'ai cherché ça pendant si longtemps, merci, @FelixEdelmann !!
tatsu
17

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/

aldo.roman.nurena
la source
6
J'essaye ceci sur Chrome, et cela ne semble pas fonctionner pour moi. La allpropriété de transition semble l'emporter sur toutes les autres quoi qu'il arrive.
animuson
2
Intéressant. Je suppose que je ne l'avais pas testé avec d'autres propriétés. Quand j'ai essayé, color 0cela fonctionnait, mais cela ne fonctionnait certainement pas background-position 0. Même background 0ne produit aucun résultat pour moi ... Voici un jsFiddle que j'ai truqué à partir du menu Gaming.SE. Pour être honnête, je n'ai même testé au background-positiondépart que parce que c'est ce que la question mentionne spécifiquement et c'est celle que j'essayais de changer moi-même.
animuson
2
Cela fonctionnait pour moi sur le chrome. Il fonctionne toujours dans IE11, mais à partir de cette semaine, la propriété all remplace désormais tout ce qui se passe plus tard sur la ligne.
cirrus
1
Comme @cirrus l'a dit, Chrome n'honore plus une durée de 0 seconde, mais vous pouvez le faire fonctionner en donnant une durée très courte à la place, comme.1ms
GetFree
1
Cela fonctionne à la fois sur Chrome et Firefox si une durée différente de zéro seconde est fournie.
Naisheel Verdhan
4

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;
}
Siva
la source
Les réponses «essayez ceci» ne sont pas les meilleures. Mieux vaut une explication de ce que vous faites.
random_user_name
2

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

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

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

lucianmarine
la source
2

Pour tous ceux qui recherchent un raccourci, pour ajouter une transition pour toutes les propriétés à l' exception d'une propriété spécifique avec retard , soyez conscient des différences entre les navigateurs, même modernes.

Une simple démo 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 que j'attends), comme ci-dessous:

entrez la description de l'image ici

Alors que Safari le «sépare» (ce qui n'est peut-être pas attendu):

entrez la description de l'image ici

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

iplus26
la source
En effet. C'est un aperçu critique. Comme il est nul de devoir spécifier chaque propriété individuellement plutôt que all, il est utile de savoir que c'est le seul moyen d'obtenir le comportement souhaité dans les navigateurs.
random_user_name
1

Essayer:

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

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

StuR
la source
fixer background-position à 0 n'est pas = supprimer la transition de background-position. N'est-ce pas?
Milche Patern
1
Cela ne peut jamais fonctionner. En redéfinissant la propriété de transition par la suite, vous remplacez complètement la propriété de transition précédente, comme si elle n'avait jamais existé. Ils ne se consolident pas.
animuson