在 CSS 中,過渡透過隨著時間的推移逐漸更改指定屬性的值來實現平滑的動畫。但是,當多個過渡應用於相同元素時,後續過渡可能會涵蓋先前的過渡。
考慮以下 CSS 程式碼片段:
在此程式碼中,顏色和和 text-shadow 屬性定義了過渡效果。問題是第二個轉換會覆蓋第一個轉換。因此,會出現文字陰影動畫,但不會出現顏色動畫。
要解決此問題並使兩個過渡同時工作,請結合使用 CSS 過渡屬性。操作方法如下:
在所有支援過渡的瀏覽器中,過渡屬性都可以用逗號分隔。透過用逗號分隔多個屬性,可以同時觸發兩個過渡。
預設情況下,過渡使用緩動計時函數。如果您希望使用不同的計時函數,例如線性,則必須明確指定。
在使用相同的計時和計時函數時使用更簡潔的方法多個屬性,使用transition-*屬性而不是簡寫:
以上是如何在一個元素上同時進行多個 CSS 轉換?的詳細內容。更多資訊請關注PHP中文網其他相關文章!