css如何使用@scroll-timeline

這篇文章將為大家詳細(xì)講解有關(guān)css如何使用@scroll-timeline，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

@scroll-timeline

1. 基本概念

@scroll-timeline 屬性定義了一個AnimationTimeline，其時間值由滾動容器中的滾動進(jìn)度決定（而不是時間決定）。一旦指定，@scroll-timeline 將通過使用animation-timeline 屬性與CSS Animation相關(guān)聯(lián)。

2. 使用方法

這里來看一個簡單的例子：

/* 設(shè)置關(guān)鍵幀動畫 */
@keyframes slide {
    to { transform: translateX(calc(100vw - 2rem)); }
}

/* 配置scroll timeline，這里將它命名為了slide-timeline */
@scroll-timeline slide-timeline {
  source: auto;
  orientation: vertical; 
  scroll-offsets: 0%, 100%; 

/*  指定關(guān)鍵幀動畫和 scroll-timeline */
.animated-element {
  animation: 1s linear forwards slide slide-timeline;
}

我們也可以對scroll-offsets屬性使用基于元素的偏移量，以在特定元素滾動到視圖中時觸發(fā)  timeline：

@scroll-timeline slide-timeline {
    scroll-offsets: selector(#element) end 0, selector(#element) start 1;
}

3. 當(dāng)前狀態(tài)

如果對 @scroll-timeline 感興趣，可以在 Chrome 中使用 flag 來啟用它。當(dāng)我們遇到一個復(fù)雜的動畫時，可能需要使用 JavaScript 動畫庫來實現(xiàn)，但是對于相對簡單的動畫，使用該屬性就可以減少不必要的import。

關(guān)于“css如何使用@scroll-timeline”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。