Wie wende ich den CSS3-Übergang auf alle Eigenschaften außer der Hintergrundposition an?

108

Ich möchte einen CSS-Übergang auf alle Eigenschaften außer der Hintergrundposition anwenden. Ich habe es so versucht:

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

Zuerst habe ich alle Eigenschaften auf Übergang gesetzt und dann versucht, nur den Übergang für die Eigenschaft Hintergrundposition zu überschreiben.

Dies scheint jedoch auch alle anderen Eigenschaften zurückzusetzen - so dass im Grunde genommen keiner der Übergänge mehr zu passieren scheint.

Gibt es eine Möglichkeit, dies zu tun, ohne alle Eigenschaften aufzulisten?

css css-transitions Speisen
quelle
1
Hallo, ich suche tatsächlich nach diesem Problem. Hast du eine akzeptable Antwort bekommen?
Milche Patern

Antworten:

143

Hier ist eine Lösung, die auch unter Firefox funktioniert:

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

Ich habe eine kleine Demo gemacht: http://jsfiddle.net/aWzwh/

Felix Edelmann
quelle
3
Aus irgendeinem Grund 1mshat es bei mir nicht funktioniert, aber es hat 0funktioniert.
Flimm
@Flimm, welchen Browser benutzt du? Und was meinst du mit "hat nicht funktioniert", hat nichts animiert?
Felix Edelmann
1
Für mich 1mshat es nicht funktioniert, aber 1ms nonefunktioniert! @ericsoco 0msoder 0sfunktioniert auch.
BCoder
3
Zeiteinheiten MÜSSEN eine Einheit haben. 0 funktioniert also nicht so wie 4 nicht, aber 4s funktionieren genauso wie 0s.
ESR
2
Ich habe so lange danach gesucht, danke, @FelixEdelmann !!
Tatsu
17

Ich hoffe nicht zu spät zu kommen. Es wird mit nur einer Zeile erreicht!

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

Das funktioniert auf Chrome. Sie müssen die CSS-Eigenschaften durch ein Komma trennen.

Hier ist ein funktionierendes Beispiel: http://jsfiddle.net/H2jet/

aldo.roman.nurena
quelle
6
Ich versuche dies auf Chrome und es scheint für mich nicht zu funktionieren. Die allÜbergangseigenschaft scheint alle anderen zu überschreiben, egal was passiert.
Animuson
2
Interessant. Ich glaube, ich hatte es nicht mit anderen Eigenschaften getestet. Als ich es versuchte color 0, funktionierte es, aber es funktioniert sicherlich nicht mit background-position 0. Sogar background 0bringt mir keine Ergebnisse ... Hier ist eine jsFiddle, die ich aus dem Gaming.SE-Menü zusammengestellt habe. Um ehrlich zu sein, habe ich nur background-positionanfangs getestet, weil die Frage dies ausdrücklich erwähnt und ich versucht habe, mich selbst zu ändern.
Animuson
2
Früher hat es für mich auf Chrom gearbeitet. Es funktioniert immer noch in IE11, aber ab dieser Woche überschreibt die Eigenschaft all jetzt alles, was später in der Zeile steht.
Cirrus
1
Wie @cirrus sagte, hält Chrome eine Dauer von 0 Sekunden nicht mehr ein, aber Sie können dafür sorgen, dass es funktioniert, indem Sie stattdessen eine sehr kurze Dauer .1ms
angeben
1
Dies funktioniert sowohl in Chrome als auch in Firefox, wenn eine Dauer ungleich Null angegeben wird.
Naisheel Verdhan
4

Versuche dies...

* {
    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
quelle
Nur-Code-Antworten sind nicht die besten. Besser ist eine Erklärung, was Sie tun.
random_user_name
2

Sie können versuchen, die Standard-W3C-Methode zu verwenden:

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

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

lucianmarin
quelle
2

Wenn Sie nach einer Abkürzung suchen, um den Übergang für alle Eigenschaften mit Ausnahme einer bestimmten Eigenschaft mit Verzögerung hinzuzufügen , sollten Sie sich bewusst sein, dass es Unterschiede zwischen selbst modernen Browsern gibt.

Eine einfache Demo unten zeigt den Unterschied. Überprüfen Sie den vollständigen Code

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

Chrome "kombiniert" die beiden Animationen (wie ich es erwartet habe) wie folgt:

Geben Sie hier die Bildbeschreibung ein

Während Safari es "trennt" (was nicht zu erwarten ist):

Geben Sie hier die Bildbeschreibung ein

Eine kompatiblere Methode besteht darin, dass Sie den spezifischen Übergang für eine bestimmte Eigenschaft zuweisen, wenn Sie eine Verzögerung für eine dieser Eigenschaften haben.

iplus26
quelle
Tatsächlich. Dies ist eine wichtige Erkenntnis. Da es lahm ist, jede Eigenschaft einzeln angeben zu müssen all, ist es nützlich zu wissen, dass dies der einzige Weg ist, um das gewünschte Verhalten über Browser hinweg zu erzielen.
random_user_name
1

Versuchen:

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

Das hat bei mir bei etwas ähnlichem funktioniert ..

StuR
quelle
Das Festlegen der Hintergrundposition auf 0 bedeutet nicht, den Übergang von der Hintergrundposition zu entfernen. Ist es nicht?
Milche Patern
1
Das kann nie funktionieren. Wenn Sie die Übergangseigenschaft anschließend neu definieren, überschreiben Sie die vorherige Übergangseigenschaft vollständig, als ob sie nie existiert hätte. Sie werden nicht konsolidiert.
Animuson