CSS animation-timeline 滾動條動畫
DEMO
https://codepen.io/javaluo/pen/JjewBxJ
scroll滾動
上面的代碼將模擬一個頭部導(dǎo)航欄，其中有一個Logo元素。
為其添加基本的CSS:(不用細看)
接下來需要為.menu和.logo定義動畫：
然后在.menu和.logo中應(yīng)用這些動畫：
解析.menu
在.menu中添加了animation-timeline: scroll();
表示根據(jù)滾動條的滾動位置來控制動畫的進展。
同時添加了animation-range: 0 100%;
表示從滾動條的高度0開始到100%的范圍都作為動畫的關(guān)聯(lián)范圍。
可以根據(jù)不同的需求定義，比如：animation-range: 50px 80%,
則表示動畫從滾動條滾動到50px開始，滾動到80%時播放完畢。
解析.logo
由于.logo元素是.menu的子集，.menu是.box的子集，
要想.logo根據(jù).box的滾動進度來執(zhí)行動畫，
就需要在.box中定義scroll-timeline-name: --box;, 需要用一個css變量來賦值。
然后在.logo中定義?animation-timeline: --box;;
如果采用了這種方式，那還可以在.box中加上scroll-timeline-axis: x/y/block/inline;來定義監(jiān)聽的軸。
animation-timeline: srcoll()
定義動畫根據(jù)滾動條來作為時間線
scroll(scroller axis)
可接受兩個參數(shù)：
scroller:
nearest: 使用最近的可滾動的祖先容器, 默認值
root: 使用文檔根元素，即
document.documentElentself: 使用元素自身
axis:
y: 監(jiān)聽y軸滾動條
x: 監(jiān)聽x軸滾動條
block: 監(jiān)聽塊級滾動條
inline: 監(jiān)聽行內(nèi)滾動條
（inline始終與文字方向保持一致，通常就是x軸，但當設(shè)置writing-mode: vertical-rl;時，inline就會變成y軸。block正好相反）
animation-range: 0 100%;
定義動畫開始和結(jié)束的范圍
對于scroll動畫，表示滾動條從上到下或從左到右的開始位置和結(jié)束位置
對于view動畫，表示從下進入到從上離開 或 從右進入到從左離開 的開始位置和結(jié)束位置
scroll-timeline-name: --name;
定義滾動容器的引用名，通常用于給孫輩或其它非子集的元素賦值
scroll-timeline-axis: x/y/block/inline;
定義滾動容器監(jiān)聽哪一個軸
scroll-timeline: --name axis;
是上面兩個屬性的簡寫
注意點
一個完整的animation通常會定義這些屬性：animation: name duration timing-function delay iteration-count direction fill-mode;
但是當使用了animation-timeline時：
不要設(shè)置
duration（動畫持續(xù)時間），會出現(xiàn)奇怪的問題。delay（動畫延遲時間）會失效，由animation-range接管iteration-count(動畫執(zhí)行次數(shù))不要設(shè)置為infinite(無限)，這樣就不會有動畫了
view滾動
animation-timeline?除了可以賦值scroll()外，還可以賦值view()
表示當元素從頁面的下方進入可視區(qū)域時，開始動畫，
當元素由頁面上方消失在視野外時，動畫執(zhí)行完畢。
animation-timeline: view()
定義動畫根據(jù)自身在可視區(qū)域的位置來執(zhí)行
view(axis inset)
可接受兩個參數(shù)
axis:
y: 監(jiān)聽y軸滾動條
x: 監(jiān)聽x軸滾動條
block: 監(jiān)聽塊級滾動條
inline: 監(jiān)聽行內(nèi)滾動條
inset: (視口偏移量，類似scroll-padding) 可以是1個值或兩個值
例子：
view-timeline-name: --name;
定義滾動區(qū)域的引用
view-timeline-axis: x/y/block/inline;
如果使用了
view-timeline-name來指定animation-timeline的值
則可以使用view-timeline-axis單獨指定軸
view-timeline-inset: 0 100%;
如果使用了
view-timeline-name來指定animation-timeline的值
則可以使用view-timeline-inset單獨指定偏移量這個屬性和
animation-range會同時起作用(疊加)
view-timeline: --name block;
view-timeline-name?和?view-timeline-axis?的簡寫
注意
由于view()是根據(jù)自身相對于可視區(qū)域來執(zhí)行動畫，所以不需要關(guān)心是根據(jù)哪個容器。
因此當定義view-timeline相關(guān)的屬性時，是直接在自身上定義，而不是在容器上定義。
這跟scroll-timeline不同，scroll-timeline需要在容器上定義，然后在子元素上使用。
所以看起來view-timeline相關(guān)的屬性顯得有些多余，直接animation-timeline:view()就好了。
timeline-scope: --name;
在scroll滾動動畫中，所有的設(shè)置都只能在容器的后代中生效
如果在容器之外有一個元素需要根據(jù)滾動條來執(zhí)行動畫，則需要在它們的共同父級設(shè)置timeline-scope，比如在body上設(shè)置這個屬性
直接把scroll-timeline-name的值賦給timeline-scope
這樣在容器外面的元素上也能通過animation-timeline: --name來應(yīng)用動畫了
這個屬性需要Chrome116以上
@scroll-timeline 規(guī)則
這個是完全另外一種語法，暫時沒有瀏覽器支持，略。
