您好,登錄后才能下訂單哦!
這篇文章主要介紹“CSS動(dòng)畫新特性@scroll-timeline怎么使用”的相關(guān)知識(shí),小編通過實(shí)際案例向大家展示操作過程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“CSS動(dòng)畫新特性@scroll-timeline怎么使用”文章能幫助大家解決問題。
在 CSS 規(guī)范 Scroll-linked Animations 中,推出了一個(gè)劃時(shí)代的 CSS 功能。也就是 -- The @scroll-timeline at-rule,直譯過來就是滾動(dòng)時(shí)間線。
什么是 @scroll-timeline
滾動(dòng)時(shí)間線呢?
@scroll-timeline
能夠設(shè)定一個(gè)動(dòng)畫的開始和結(jié)束由滾動(dòng)容器內(nèi)的滾動(dòng)進(jìn)度決定,而不是由時(shí)間決定。
意思是,我們可以定義一個(gè)動(dòng)畫效果,該動(dòng)畫的開始和結(jié)束可以通過容器的滾動(dòng)來進(jìn)行控制。
再系統(tǒng)性學(xué)習(xí)語法之前,我們通過一個(gè) DEMO,簡(jiǎn)單了解一下它的用法:
我們首先實(shí)現(xiàn)一個(gè)簡(jiǎn)單的字體 F 旋轉(zhuǎn)動(dòng)畫:
<div id="g-box">F</div>
#g-box { animation-name: rotate; animation-duration: 3s; animation-direction: alternate; animation-easing-function: linear; } @keyframes rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
接下來,我們把這個(gè)動(dòng)畫和 @scroll-timeline
相結(jié)合,需要把它放置到一個(gè)可滾動(dòng)的容器中:
<div id="g-content"> <div id="g-box">F</div> </div>
#g-content { width: 300px; height: 170vh; background: #999; } #g-box { font-size: 150px; margin: 70vh auto 0; animation-name: rotate; animation-duration: 3s; animation-direction: alternate; animation-easing-function: linear; animation-timeline: box-rotate; } @keyframes rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @scroll-timeline box-rotate { source: selector("#g-content"); }
這里,我們實(shí)現(xiàn)了一個(gè)可滾動(dòng)容器 #g-content
,它的高度是 170vh
,也就是可視界面高度的 1.7 倍,并且把 #g-box
容器放置在一個(gè)距離頂部 70vh
高度的地方:
看到這里,大家應(yīng)該能夠理解 @scroll-timeline
的作用及含義了,它賦予了 CSS 能夠基于滾動(dòng)條的滾動(dòng)去控制動(dòng)畫行進(jìn)的能力! Amazing!!
接下來,我們先緩一緩,簡(jiǎn)單看一看 @scroll-timeline
的語法。
使用 @scroll-timeline
,最核心的就是需要定義一個(gè) @scroll-timeline
規(guī)則:
@scroll-timeline moveTimeline { source: selector("#g-content"); orientation: vertical; scroll-offsets: 0px, 500px; }
其中:
source:綁定觸發(fā)滾動(dòng)動(dòng)畫的滾動(dòng)容器
source: auto
:綁定到 Document
,也就是全局 Windows 對(duì)象
source: selector("id-selector")
,通過 selector()
,內(nèi)置一個(gè) #id
選擇器,選取一個(gè)可滾動(dòng)容器
source: none
:不指的滾動(dòng)容器
orientation:設(shè)定滾動(dòng)時(shí)間線的方向
orientation: auto
:默認(rèn)為 vertical,也就是豎直方向的滾動(dòng)
orientation: vertical
:豎直方向的滾動(dòng)
orientation: horizontal
:水平方向的滾動(dòng)
orientation: block
:不太常用,使用沿塊軸的滾動(dòng)位置,符合書寫模式和方向性
orientation: inline
:不太常用,使用沿內(nèi)聯(lián)軸的滾動(dòng)位置,符合書寫模式和方向性
scroll-offsets:滾動(dòng)時(shí)間線的核心,設(shè)定在滾動(dòng)的什么階段,觸發(fā)動(dòng)畫,可通過三種方式之一進(jìn)行設(shè)置:
scroll-offsets: none
這意味著沒有 scroll-offset 指定。
由逗號(hào)分隔的 length-percentage 值列表確定。每個(gè)值都映射到animation-duration。例如,如果 ananimation-duration 設(shè)置為 2s 且滾動(dòng)偏移量為 0px, 30px, 100px,則在 1s 時(shí),滾動(dòng)偏移量將為 30px。
第三種確定滾動(dòng)偏移量的方法是使用元素偏移量。這意味著可以指定頁面內(nèi)的元素,其位置決定了滾動(dòng)時(shí)間線以及要使用這些元素的哪個(gè)邊緣。指定元素是使用 selector() 函數(shù)完成的,該函數(shù)接收元素的 id。邊緣由關(guān)鍵字 start 或確定 end??蛇x的閾值的 0–1 可用于表示元素滾動(dòng)中預(yù)期可見的百分比。
scroll-offsets
的理解會(huì)比較困難,我們稍后詳述。
在設(shè)定了一個(gè) @scroll-timeline
之后,我們只需要將它和動(dòng)畫綁定起來即可,通過 animation-timeline
:
@scroll-timeline moveTimeline { source: selector("#g-content"); orientation: vertical; scroll-offsets: 0px, 500px; } div { animation-name: move; animation-duration: 3s; animation-timeline: moveTimeline; } @keyframes move{ 0% { transform: translate(0, 0); } 100% { transform: translate(100%, 0); } }
之前在 不可思議的純 CSS 滾動(dòng)進(jìn)度條效果 一文中,我們介紹了一種使用漸變實(shí)現(xiàn)的純 CSS 滾動(dòng)進(jìn)度指示器效果:
該方法有些小小的瑕疵。其中一個(gè)就是當(dāng)滾動(dòng)距離太短的時(shí)候,進(jìn)度條右側(cè)會(huì)有明顯的斜邊效果。
而有了 @scroll-timeline
之后,我們終于可以將滾動(dòng)和動(dòng)畫這兩個(gè)元素綁定起來,再實(shí)現(xiàn)滾動(dòng)進(jìn)度指示器,就已經(jīng)非常輕松了:
<div id="g-container"> <p>...文本內(nèi)容...</p> </div>
#g-container { width: 100vw; } #g-container::before { content: ""; position: fixed; height: 5px; left: 0; top: 0; right: 0; background: #ffc107; animation-name: scale; animation-duration: 1s; animation-fill-mode: forwards; animation-timeline: box-rotate; transform-origin: 0 50%; } @keyframes scale { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } @scroll-timeline box-rotate { source: auto; orientation: vertical; }
1、我們?cè)陧撁孀钌戏?,通過一個(gè)偽元素,實(shí)現(xiàn)一個(gè)占滿屏幕 100%
的 5px
高的進(jìn)度條。正常而言是這樣:
2、通過設(shè)定一個(gè) transform: scaleX(0)
到 transform: scaleX(1)
的動(dòng)畫,并且將它與 body 的滾動(dòng)相綁定,即可得到滾動(dòng)指示器,效果如下:
大家可以再看看上面的 Gif 圖,都有一個(gè)問題,就是動(dòng)畫的開始時(shí)間都是從滾動(dòng)一開始就開始了,剛好在滾動(dòng)結(jié)束時(shí)結(jié)束。那么如果我希望動(dòng)畫在滾動(dòng)的特定階段觸發(fā),那該怎么辦呢?
這里,就需要借助 scroll-offsets
,去更加精確的控制我們的動(dòng)畫。
在滾動(dòng)過程中,我們可以將一個(gè)元素,劃分為 3 個(gè)區(qū)域:
滾動(dòng)過程中,從上方視野盲區(qū),進(jìn)入視野
滾動(dòng)過程中,處于視野中
滾動(dòng)過程中,從視野中,進(jìn)入下方視野盲區(qū)
在這里,我們就可以得到兩個(gè)邊界,上方邊界,下方邊界:
而對(duì)于上下兩個(gè)邊界,又會(huì)有兩種狀態(tài)。以上邊界為例子,會(huì)有:
元素剛剛開始進(jìn)入可視區(qū)
元素完全進(jìn)入可視區(qū)
對(duì)于這兩種狀態(tài),我們用 start 0
和 start 1
表示,同理,下方的邊界也可以用 end 0
和 end 1
表示:
這里的 0 和 1 實(shí)際表示的是,元素滾動(dòng)中預(yù)期可見的百分比。
有了這些狀態(tài)值,配合 scroll-offsets
,我們就可以精確控制滾動(dòng)動(dòng)畫的觸發(fā)時(shí)間。
我們?cè)O(shè)定一個(gè)從左向右并且伴隨透明度變化的動(dòng)畫,的看看下面幾種情況:
1、滾動(dòng)動(dòng)畫在元素從下方開始出現(xiàn)時(shí)開始,完全出現(xiàn)后截止。
動(dòng)畫運(yùn)行范圍:end 0
--> end 1
:
@keyframes move { 0% { transform: translate(-100%, 0); opacity: 0; } 100% { transform: translate(0, 0); opacity: 1; } } @scroll-timeline box-move { source: auto; orientation: "vertical"; scroll-offsets: selector(#g-box) end 0, selector(#g-box) end 1; /* Legacy Descriptors Below: */ start: selector(#g-box) end 0; end: selector(#g-box) end 1; time-range: 1s; } #g-box { animation-name: move; animation-duration: 3s; animation-fill-mode: both; animation-timeline: box-move; }
2、滾動(dòng)動(dòng)畫在元素從下方完全出現(xiàn)時(shí)開始,在滾動(dòng)到上方即將離開屏幕后截止:
動(dòng)畫運(yùn)行范圍:end 1
--> start 1
:
// ... @scroll-timeline box-move { source: auto; orientation: "vertical"; scroll-offsets: selector(#g-box) end 1, selector(#g-box) start 1; /* Legacy Descriptors Below: */ start: selector(#g-box) end 1; end: selector(#g-box) start 1; time-range: 1s; } // ...
3、滾動(dòng)動(dòng)畫在元素滾動(dòng)到上方即將離開屏幕后開始,完全離開屏幕后截止:
動(dòng)畫運(yùn)行范圍:start 1
--> start 0
:
// ... @scroll-timeline box-move { source: auto; orientation: "vertical"; scroll-offsets: selector(#g-box) start 1, selector(#g-box) start 0; /* Legacy Descriptors Below: */ start: selector(#g-box) start 1; end: selector(#g-box) start 0; time-range: 1s; }
掌握 scroll-offsets
的用法是靈活運(yùn)用滾動(dòng)時(shí)間線的關(guān)鍵,當(dāng)然,在上面你還會(huì)看到 start: selector(#g-box) start 1
和 end: selector(#g-box) start 0
這種寫法,這是規(guī)范歷史遺留問題,最新的規(guī)范已經(jīng)使用了 scroll-offsets
去替代 start:
和 end:
的寫法。
在能夠掌握 @scroll-timeline 的各個(gè)語法之后,我們就可以開始使用它創(chuàng)造各種動(dòng)畫效果了。
@scroll-timeline
雖好,目前仍處于實(shí)驗(yàn)室特性時(shí)間,Chrome 從 85 版本開始支持,但是默認(rèn)是關(guān)閉的。
在最新的 chrome、Edge、Opera 可以通過瀏覽器配置開啟該特性,Chrome 下開啟該特性需要:
瀏覽器 URL 框輸入 chrome://flags
開啟 #enable-experimental-web-platform-features
美酒雖好,但是離完全能用,瀏覽器大規(guī)模支持還需要等待一會(huì),給時(shí)間一點(diǎn)時(shí)間吧!
基于目前的兼容性問題,我們可以通過瀏覽器的特性檢測(cè) @supports
語法,來漸進(jìn)增強(qiáng)使用該功能。
特性檢測(cè)的語法也非常簡(jiǎn)單:
@supports (animation-timeline: works) { @scroll-timeline list-item-1 { source: selector(#list-view); start: selector(#list-item-1) end 0; end: selector(#list-item-1) end 1; scroll-offsets: selector(#list-item-1) end 0, selector(#list-item-1) end 1 ; time-range: 1s; } // ... }
通過 @supports (animation-timeline: works) {}
可以判斷瀏覽器是否支持 @scroll-timeline
。
關(guān)于“CSS動(dòng)畫新特性@scroll-timeline怎么使用”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。