Wie kann man mehrere CSS-Übergänge für ein Element haben?

Es ist eine ziemlich einfache Frage, aber ich kann keine sehr gute Dokumentation zu den CSS-Übergangseigenschaften finden. 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 bringe ich beide dazu, gleichzeitig zu animieren? Vielen Dank für alle Antworten.

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

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

easeist die Standard-Timing-Funktion, sodass Sie sie nicht angeben müssen. Wenn Sie wirklich wollen linear, müssen Sie es angeben:

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

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

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

Sie können auch einfach erheblich mit:

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

So etwas wie das Folgende ermöglicht mehrere Übergänge gleichzeitig:

-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

Wenn Sie alle Eigenschaften gleich animieren, können Sie sie einzeln festlegen, sodass Sie den Code nicht wiederholen können.

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

Hier gibt es mehr darüber: CSS-Übergangskürzel mit mehreren Eigenschaften?

Ich würde es vermeiden, die Eigenschaft all zu verwenden (Übergangseigenschaft überschreibt 'all'), da dies zu unerwünschtem Verhalten und unerwarteten Leistungstreffern führen kann.

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

Hier ist ein WENIGER Mixin zum gleichzeitigen Übergang von zwei Eigenschaften:

.transition-two(@transition1, @transition1-duration, @transition2, @transition2-duration) {
 -webkit-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
    -moz-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
      -o-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
          transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
}

Es ist möglich, mehrere Übergänge mit unterschiedlichen Werten für Dauer, Verzögerung und Timing-Funktion festzulegen. Verwenden Sie zum Teilen verschiedener Übergänge,

button{
  transition: background 1s ease-in-out 2s, width 2s linear;
  -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */
}

Referenz: https://kolosek.com/css-transition/

Es ist auch möglich, die Angabe der Eigenschaften insgesamt zu vermeiden.

#box {
  transition: 0.4s;
  position: absolute;
  border: 1px solid darkred;
  bottom: 20px; left: 20px;
  width: 200px; height: 200px;
  opacity: 0;
}

#box.on {
  opacity: 1;
  height: 300px;
  width: 500px;
 }