如何同時動畫 CSS 顯示和不透明度變化？

轉換CSS 顯示和不透明度屬性

嘗試使用顯示和不透明度屬性對CSS 元素進行動畫處理時，可能會很困難。標準 CSS 過渡屬性僅允許數值動畫，使其與顯示變更不相容。

但是，解決方案在於利用 CSS 關鍵影格動畫。透過建立自訂關鍵影格動畫，我們可以同時編排顯示和不透明度屬性的轉場。

提供的 CSS 程式碼引入了一個名為「fadeInFromNone」的關鍵影格動畫。首先將顯示設為無，不透明度設為 0，從而有效隱藏元素。在動畫的 1% 處，顯示設定為區塊，使元素可見，同時不透明度保持為 0。這將創建元素從透明度淡入的外觀。動畫在 100% 時結束，元素完全可見且不透明。

要使用此動畫，請將其套用於父元素的懸停狀態。以下是更新的程式碼：

<code class="css">.parent:hover .child
{
    display: block;

    -webkit-animation: fadeInFromNone 0.5s ease-out;
    -moz-animation: fadeInFromNone 0.5s ease-out;
    -o-animation: fadeInFromNone 0.5s ease-out;
    animation: fadeInFromNone 0.5s ease-out;
}</code>

此解決方案可讓您無縫過渡顯示和不透明度屬性，從而實現所需的動畫效果。

以上是如何同時動畫 CSS 顯示和不透明度變化？的詳細內容。更多資訊請關注PHP中文網其他相關文章！