Wie kann man mehrere CSS-Übergänge auf einem Element haben?

Question

Es ist eine ziemlich einfache Frage, aber ich kann nicht finden, sehr gute Dokumentation über die CSS-Übergangseigenschaften. Hier ist das CSS-Snippet:

    .nav a
{
    text-transform:uppercase;
    text-decoration:none;
    color:#d3d3d3;
    line-height:1.5 em;
    font-size:.8em;
    display:block;
    text-align:center;
    text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15);
    -webkit-transition: color .2s linear;
    -moz-transition: color .2s linear;
    -o-transition: color .2s linear;
    transition: color .2s linear;
    -webkit-transition: text-shadow .2s linear;
    -moz-transition: text-shadow .2s linear;
    -o-transition: text-shadow .2s linear;
    transition: text-shadow .2s linear;
}

.nav a:hover
{
    color:#F7931E;
    text-shadow: 0 1.5em 0 rgba(247, 147, 30, 0.15);
}

Wie Sie sehen können, überschreiben sich die Übergangseigenschaften gegenseitig. So wie es aussieht, wird der Textschatten animiert, aber nicht die Farbe. Wie kann ich beide gleichzeitig animieren? Danke für jede Antwort.

Answer 1

Übergangseigenschaften werden in allen Browsern, die Übergänge unterstützen, durch Kommata getrennt:

.nav a {
  transition: color .2s, text-shadow .2s;
}

ease ist die Standard-Timing-Funktion, Sie müssen sie also nicht angeben. Wenn Sie wirklich wollen linear müssen Sie ihn angeben:

transition: color .2s linear, text-shadow .2s linear;

Dies beginnt sich zu wiederholen. Wenn Sie also dieselben Zeiten und Zeitfunktionen für mehrere Eigenschaften verwenden wollen, ist es am besten, die verschiedenen transition-* Eigenschaften anstelle der Kurzschrift:

transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;

Answer 2

EDIT: Ich bin hin- und hergerissen, ob ich diesen Beitrag löschen soll. Was das Verständnis der CSS-Syntax angeht, ist es gut, dass die Leute wissen all existiert, und je nach der Struktur Ihres CSS kann es manchmal besser sein als eine Million einzelner Deklarationen. Andererseits ist es Mai eine Leistungseinbuße haben, obwohl ich noch keine Daten gesehen habe, die diese Hypothese stützen. Im Moment lasse ich es so, aber ich möchte, dass die Leute wissen, dass es eine gemischte Sache ist.

Ursprünglicher Beitrag:

Sie können auch einfach deutlich mit:

.nav a {
    transition: all .2s;
}

NUR SO ZUM SPASS: all wird impliziert, wenn es nicht angegeben ist, also transition: .2s; wird Sie an denselben Ort bringen.

Answer 3

Wenn Sie alle Eigenschaften gleich animieren, können Sie jede einzeln einstellen, so dass Sie den Code nicht wiederholen müssen.

 transition: all 2s;
 transition-property: color, text-shadow;

Mehr dazu gibt es hier: CSS-Übergangskurzschrift mit mehreren Eigenschaften?

Ich würde es vermeiden, die Eigenschaft all (transition-property überschreibt 'all') zu verwenden, da dies zu unerwünschtem Verhalten und unerwarteten Leistungseinbußen führen kann.

Answer 4

Ein Beispiel wie das folgende wird mehrere Übergänge gleichzeitig ermöglichen:

-webkit-transition: color .2s linear, text-shadow .2s linear;
   -moz-transition: color .2s linear, text-shadow .2s linear;
     -o-transition: color .2s linear, text-shadow .2s linear;
        transition: color .2s linear, text-shadow .2s linear;

Beispiel: http://jsbin.com/omogaf/2

Answer 5

.nav a {
    transition: color .2s, text-shadow .2s;
}