使用@starting-style簡化入口動畫
創建流暢的進入動畫可能具有挑戰性。 DOM 載入時間和 display: none
動畫的複雜性通常會導致令人沮喪的結果。 @starting-style
規則提供了一個簡化的解決方案,可讓您在元素首次出現時明確定義 CSS 屬性的初始值,從而確保從一開始就無縫過渡。
在這裡探索完整文章和更多範例。
了解基礎
@starting-style
設定 CSS 屬性 在 元素變得可見之前的初始狀態 - 它的「之前」狀態。 「之後」狀態是在標準 CSS 規則中定義的。 其工作原理如下:
element { transition: opacity 0.5s ease-in; opacity: 1; @starting-style { opacity: 0; } }
初始載入時,@starting-style
將元素的不透明度設為 0。然後它平滑地過渡到最終狀態(在本例中不透明度:1)。當元素從 display: none
過渡到可見時,此功能也適用,使其非常適合對切換元素進行動畫處理。
利用@starting-style
您可以透過兩種方式套用 @starting-style
:嵌套在元素的規則集中(不需要選擇器)或使用選擇器單獨定義。
重要提示:在偽元素(如 @starting-style
或 ::before
)內嵌套 ::after
將無法如預期運作。樣式會影響父元素,而不是偽元素。
/* Standalone */ @starting-style { element { opacity: 0; } } element { opacity: 1; transition: opacity 0.5s ease-in; } /* Nested */ element { opacity: 1; transition: opacity 0.5s ease-in; @starting-style { opacity: 0; } }
關鍵考慮因素:
之後。@starting-style
和「原始規則」具有相同的特異性。為了可靠的應用,請務必將@starting-style
at 規則 放在 “原始規則”
實際應用
@starting-style
擅長創造入口效果和過渡。 考慮將其用於頁面載入時淡入文字或動畫彈出視窗和對話框。 以下是幾個範例:
動畫來自 display: none
@starting-style
的主要好處是它能夠為最初隱藏的元素創建平滑的過渡,特別是那些從 display: none
過渡的元素。 如果沒有 @starting-style
,由於缺乏定義的起始狀態,因此很難對這種轉換進行動畫處理。 @starting-style
透過提供初始狀態來解決這個問題。
dialog
元素提供了清晰的說明。它的主體在 display: none
和 display: block
之間切換。 由於 display
屬性更改,因此通常不可能對其進行動畫處理,但 @starting-style
使其可以實現。
頁面載入時淡出和滑動
在此範例中,@starting-style
定義兩個元素的「之前」狀態。 淡入淡出效果將初始不透明度設為 0,而幻燈片效果則使用左平移。
本文重點介紹入口動畫。 @starting-style
不處理退出效果。 對於退出動畫,您需要探索 transition-behavior
,這是另一個討論的主題。
以上是使用@starting-style簡化入口動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)