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

327

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.

Eric Thoma
quelle
Vergessen Sie nicht, dass dies transition: allfür Safari / iPad sehr fehlerhaft ist: joelglovier.com/writing/…
Oğuzhan Kahyaoğlu

Antworten:

583

Ü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;
Coreyward
quelle
11
Ich gehe davon aus, dass Transformation eine Kette ist, in der es auf die Reihenfolge ankommt. Die Syntax fühlt sich also gut an, wenn Sie an funktionale Verkettung
gewöhnt
1
Als allgemeiner Kommentar zu Übergängen in CSS sollte man bedenken, dass mehrere Übergangsdefinitionen nacheinander nicht funktionieren. Um dies zu erreichen, müssen diese in derselben Definition sein (wie in der SA hier). Nach den Grundregeln von CSS gilt die "neueste" Regel. Wenn also mehrere Definitionen in separaten Zeilen vorhanden sind, wird nur die letzte Definition angewendet. Zu
Ihrer Information
37

Sie können auch einfach erheblich mit:

.nav a {
    -webkit-transition: all .2s;
}
XML
quelle
44
Sie können "alle" tatsächlich entfernen, da dies die Standardeinstellung ist, sofern nicht anders angegeben.
Joshnh
13
+1 für einen hervorragenden Punkt, aber ich denke, es ist sinnvoll, ihn dort zu belassen, insbesondere für Konsistenz und Verständnis zwischen den Teams.
XML
4
Vorsicht! Wenn die Entwicklung für Mobiltelefone in Kombination mit hardwarebeschleunigten Elementen neue Geräte fehlerhaft und alte Geräte unbrauchbar macht.
Ilya Karnaukhov
2
Danke, @ CanerŞahin. Können Sie uns Dokumentations- oder Benchmarking-Tools geben, die den Menschen helfen, diesen Punkt zu verstehen? Sehen Sie auch Beweise dafür, dass "alles" schlechter ist als die Verwendung eines Spezifizierers?
XML
3
@ XML Wie es erklärt wurde, gibt es zwei negative Auswirkungen. 1, Der Browser fügt zusätzliche Ressourcen aufgrund der Verwendung von 'all' hinzu. Der Browser hört sich dieses Element genau an und wartet auf Änderungen, die weniger leistungsfähig sind und einen Seitenruck erzeugen können. 2, Kann unerwartete Effekte erzeugen, wenn ein Entwickler später eine Hintergrundfarbe einfügt, die dann übergeht, was möglicherweise nicht erwartet oder erforderlich ist.
Stefan Burt
29

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

Delan Azabani
quelle
24

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.

Corey Young
quelle
2
.nav a {
    transition: color .2s, text-shadow .2s;
}
Locoroco
quelle
1

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;
}
user1445230
quelle
Autoprefixer ist noch schöner!
Umgeschrieben
Autoprefixer + Stift FTW.
Jason Lydon
1

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/

Nesha Zoric
quelle
0

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;
 }
jerblack
quelle