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.
animation
css
css-transitions
Eric Thoma
quelle
quelle
transition: all
für Safari / iPad sehr fehlerhaft ist: joelglovier.com/writing/…Antworten:
Übergangseigenschaften werden in allen Browsern, die Übergänge unterstützen, durch Kommas getrennt:
ease
ist die Standard-Timing-Funktion, sodass Sie sie nicht angeben müssen. Wenn Sie wirklich wollenlinear
, müssen Sie es angeben: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:quelle
Sie können auch einfach erheblich mit:
quelle
So etwas wie das Folgende ermöglicht mehrere Übergänge gleichzeitig:
Beispiel: http://jsbin.com/omogaf/2
quelle
Wenn Sie alle Eigenschaften gleich animieren, können Sie sie einzeln festlegen, sodass Sie den Code nicht wiederholen können.
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.
quelle
quelle
Hier ist ein WENIGER Mixin zum gleichzeitigen Übergang von zwei Eigenschaften:
quelle
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
,
Referenz: https://kolosek.com/css-transition/
quelle
Es ist auch möglich, die Angabe der Eigenschaften insgesamt zu vermeiden.
quelle