這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 CSS 滾動驅動動畫 scroll() animation-timeline 通過 scroll() 指定可滾動元素與滾動軸來為容器動畫提供一個匿名的 scroll progress timeline. 通過元素在頂部和底部(或左邊和右邊 ...
這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
CSS 滾動驅動動畫 scroll()
animation-timeline通過scroll()指定可滾動元素與滾動軸來為容器動畫提供一個匿名的scroll progress timeline.
通過元素在頂部和底部(或左邊和右邊)的滾動推進 scroll progress timeline. 並且元素滾動的位置會被轉換為百分比, 滾動開始被轉化為 0%, 滾動結束被轉化為 100%
如果 scroll() 指定的滾動軸不包含滾動條, 也就是元素在滾動軸的方向不可滾動, 那麼 timeline 的進度為 0%.
語法
scroll() 可以接受兩個參數
滾動元素: 滾動元素提供scroll progress timeline. 可以取值nearest: (預設值)設置animation-timeline元素最近的、具有滾動條的祖先元素.root: 文檔的根元素, 即<html>元素self: 設置animation-timeline的元素自身
滾動軸:y: 垂直滾動軸x: 水平滾動軸block: (預設值)與滾動容器中行內文本方向垂直的軸. 對於從左到右書寫的文字, 與y相同. 對於從上到下書寫的文字, 與x相同.inline: 與滾動容器中行內文本方向水平的軸. 對於從左到右書寫的文字, 與x相同. 對於從上到下書寫的文字, 與y相同.
這兩個參數的書寫順序沒有要求, 但是參數之間沒有逗號, 這一點我一定要強調, 因為 translate 這個函數的參數就需要有逗號!!!
實例
正常舉例
下麵以背景漸變舉例, 並且滾動容器就是元素自身.
@keyframes bg-color {
from {
background-color: lightpink;
}
to {
background-color: lightskyblue;
}
}
.box {
width: 200px;
height: 300px;
border: 1px solid #bbb;
overflow: auto;
animation: bg-color linear;
animation-timeline: scroll(self);
}
如果我們加上下麵的代碼, 改變文字書寫方向, 從上到下, 從左到右
html { writing-mode: vertical-lr; }
最近滾動祖先?
來看一個例子, 這個例子出現了問題, 為什麼動畫沒有效果呢?
