首頁資訊 CSS 滾動驅(qū)動動畫

CSS 滾動驅(qū)動動畫

來源：泰然健康網(wǎng) 時(shí)間：2025年07月29日 03:20

CSS 滾動驅(qū)動動畫 ?

在最新的 Chrome 115 中，令人無比期待的 CSS 滾動驅(qū)動動畫 (CSS scroll-driven animations) 終于正式支持了

Demo ?

Online Preview{target="_self"}

滾動進(jìn)度時(shí)間線（Scroll progress timeline） ?

這里的 scroll() 是一個(gè)簡寫，可以傳遞兩個(gè)參數(shù)，分別是 scroller 和 axis

scroller 表示滾動容器，支持以下幾個(gè)關(guān)鍵值

nearest: 使用最近的祖先滾動容器 default。root: 使用文檔視口作為滾動容器。self: 使用元素本身作為滾動容器。

axis 表示滾動方向，支持以下幾個(gè)關(guān)鍵值

block: 滾動容器的塊級軸方向 default。inline: 滾動容器內(nèi)聯(lián)軸方向。y: 滾動容器沿 y 軸方向。x: 滾動容器沿 x 軸方向。

css

.test { /* 無參數(shù) */ animation-timeline: scroll(); /* 設(shè)置滾動容器 */ animation-timeline: scroll(nearest); /* 默認(rèn) */ animation-timeline: scroll(root); animation-timeline: scroll(self); /* 設(shè)置滾動方向 */ animation-timeline: scroll(block); /* 默認(rèn) */ animation-timeline: scroll(inline); animation-timeline: scroll(y); animation-timeline: scroll(x); /* 同時(shí)設(shè)置 */ animation-timeline: scroll(block nearest); /* 默認(rèn) */ animation-timeline: scroll(inline root); animation-timeline: scroll(x self); }

完整代碼 ?

html

css

body { margin: 0; } main { height: 100vh; width: 100vw; overflow: scroll; scroll-timeline: --scroller block; } .progress { position: fixed; top: 0; left: 0; right: 0; height: 10px; background-color: #f44336; transform-origin: 0 50%; animation: grow-progress 3s linear; /* 這里必須使用命名的 scroll-timeline-name 而不是 scroll()，因?yàn)?progress 是 fixed 定位，父親容器是 body 而不是 main */ animation-timeline: --scroller; } @keyframes grow-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } .block { width: 500px; height: 1000px; }

網(wǎng)址: CSS 滾動驅(qū)動動畫 http://www.u1s5d6.cn/newsview1616402.html