web-dev-qa-db-fra.com

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

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 réinitialiser également toutes les autres propriétés - donc, fondamentalement, aucune des transitions ne semble se produire.

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

css3css-transitions
97
Dine

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/

129
Felix Edelmann

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/

17
aldo.roman.nurena

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

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/

1
lucianmarin

Essayer:

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

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

1
StuR

Pour quiconque cherche un raccourci, ajouter une transition pour toutes les propriétés , à l’exception d’une propriété spécifique avec délai , sachez qu'il y a différences entre les navigateurs, même modernes.

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

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

Chrome va "combiner" les deux animations (comme je l’attendais), comme ci-dessous:

enter image description here

Alors que Safari "le sépare" (ce qui est inattendu):

enter image description here

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

1
iplus26