如何在一個元素上同時進行多個 CSS 轉換？

元素上的多個 CSS 過渡

在 CSS 中，過渡透過隨著時間的推移逐漸更改指定屬性的值來實現平滑的動畫。但是，當多個過渡應用於相同元素時，後續過渡可能會涵蓋先前的過渡。

考慮以下 CSS 程式碼片段：

在此程式碼中，顏色和和 text-shadow 屬性定義了過渡效果。問題是第二個轉換會覆蓋第一個轉換。因此，會出現文字陰影動畫，但不會出現顏色動畫。

要解決此問題並使兩個過渡同時工作，請結合使用 CSS 過渡屬性。操作方法如下：

逗號分隔的過渡屬性

在所有支援過渡的瀏覽器中，過渡屬性都可以用逗號分隔。透過用逗號分隔多個屬性，可以同時觸發兩個過渡。

指定緩動函數

預設情況下，過渡使用緩動計時函數。如果您希望使用不同的計時函數，例如線性，則必須明確指定。

Transition Properties Shorthand

在使用相同的計時和計時函數時使用更簡潔的方法多個屬性，使用transition-*屬性而不是簡寫：

以上是如何在一個元素上同時進行多個 CSS 轉換？的詳細內容。更多資訊請關注PHP中文網其他相關文章！