So implementieren Sie mehrere CSS-Übergangseffekte
P粉258788831
2023-08-22 11:00:36
<p>Dies ist eine ziemlich einfache Frage, aber ich kann keine gute Dokumentation zu CSS-Übergangseigenschaften finden. Hier ist das CSS-Snippet: </p>
<pre class="brush:php;toolbar:false;">.nav a
{
text-transform:uppercase;
Textdekoration: keine;
Farbe:#d3d3d3;
Zeilenhöhe:1,5em;
Schriftgröße:.8em;
Bildschirmsperre;
text-align:center;
Textschatten: 0 -1.5em 0 rgba(255, 255, 255, 0.15);
-webkit-transition: Farbe .2s linear;
-moz-transition: Farbe .2s linear;
-o-Übergang: Farbe .2s linear;
Übergang: Farbe .2s linear;
-webkit-transition: text-shadow .2s linear;
-moz-transition: text-shadow .2s linear;
-o-transition: text-shadow .2s linear;
Übergang: text-shadow .2s linear;
}
.nav a:hover
{
Farbe:#F7931E;
Textschatten: 0 1.5em 0 rgba(247, 147, 30, 0.15);
}</pre>
<p>Wie Sie sehen, überschreiben sich die Übergangseigenschaften gegenseitig. Derzeit wird der Textschatten animiert, die Farbe jedoch nicht. Wie kann ich sie gleichzeitig animieren? Vielen Dank für alle Antworten. </p>
编辑：我对是否删除这篇帖子感到犹豫。就理解CSS语法而言，让人们知道
all的存在是好的，根据CSS的结构，它可能比一百万个单独的声明更可取。另一方面，它可能会有性能损耗，尽管我还没有看到任何支持这个假设的数据。暂时我会保留它，但我希望人们意识到这是一种两面性。原始帖子：
你也可以简单地使用以下代码：
.nav a { transition: all .2s; }FWIW：如果未指定，
all是默认的，所以transition: .2s;也可以达到相同的效果。在支持过渡效果的所有浏览器中，过渡属性是用逗号分隔的：
.nav a { transition: color .2s, text-shadow .2s; }ease是默认的时间函数，所以你不需要指定它。如果你真的想要linear，你需要明确指定：这开始变得重复了，所以如果你要在多个属性上使用相同的时间和时间函数，最好使用各种
transition-*属性而不是简写形式：