真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

CSS動畫新特性@scroll-timeline怎么使用

這篇文章主要介紹“CSS動畫新特性@scroll-timeline怎么使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“CSS動畫新特性@scroll-timeline怎么使用”文章能幫助大家解決問題。

10年積累的網(wǎng)站制作、成都網(wǎng)站設計經(jīng)驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你，你也不認識我。但先網(wǎng)站制作后付款的網(wǎng)站建設流程，更有千山免費網(wǎng)站建設讓你可以放心的選擇與我們合作。

CSS動畫新特性@scroll-timeline怎么使用

在 CSS 規(guī)范 Scroll-linked Animations 中，推出了一個劃時代的 CSS 功能。也就是 -- The @scroll-timeline at-rule，直譯過來就是滾動時間線。

何為 @scroll-timeline 滾動時間線？

什么是 @scroll-timeline 滾動時間線呢？

@scroll-timeline 能夠設定一個動畫的開始和結(jié)束由滾動容器內(nèi)的滾動進度決定，而不是由時間決定。

意思是，我們可以定義一個動畫效果，該動畫的開始和結(jié)束可以通過容器的滾動來進行控制。

示意 DEMO

再系統(tǒng)性學習語法之前，我們通過一個 DEMO，簡單了解一下它的用法：

我們首先實現(xiàn)一個簡單的字體 F 旋轉(zhuǎn)動畫：

F
#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);
    }
}

接下來，我們把這個動畫和 @scroll-timeline 相結(jié)合，需要把它放置到一個可滾動的容器中：


    F
#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");
}

這里，我們實現(xiàn)了一個可滾動容器 #g-content，它的高度是 170vh，也就是可視界面高度的 1.7 倍，并且把 #g-box 容器放置在一個距離頂部 70vh 高度的地方：

CSS動畫新特性@scroll-timeline怎么使用

看到這里，大家應該能夠理解 @scroll-timeline 的作用及含義了，它賦予了 CSS 能夠基于滾動條的滾動去控制動畫行進的能力！Amazing??！

@scroll-timeline 語法介紹

接下來，我們先緩一緩，簡單看一看 @scroll-timeline 的語法。

使用 @scroll-timeline，最核心的就是需要定義一個 @scroll-timeline 規(guī)則：

@scroll-timeline moveTimeline {
  source: selector("#g-content");
  orientation: vertical;
  scroll-offsets: 0px, 500px;
}

其中：

scroll-offsets 的理解會比較困難，我們稍后詳述。

在設定了一個 @scroll-timeline 之后，我們只需要將它和動畫綁定起來即可，通過 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);
    }
}

使用 @scroll-timeline 實現(xiàn)滾動進度指示器

之前在 不可思議的純 CSS 滾動進度條效果 一文中，我們介紹了一種使用漸變實現(xiàn)的純 CSS 滾動進度指示器效果：

CSS動畫新特性@scroll-timeline怎么使用

該方法有些小小的瑕疵。其中一個就是當滾動距離太短的時候，進度條右側(cè)會有明顯的斜邊效果。

而有了 @scroll-timeline 之后，我們終于可以將滾動和動畫這兩個元素綁定起來，再實現(xiàn)滾動進度指示器，就已經(jīng)非常輕松了：


    
...文本內(nèi)容...


#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、我們在頁面最上方，通過一個偽元素，實現(xiàn)一個占滿屏幕 100% 的 5px 高的進度條。正常而言是這樣：

CSS動畫新特性@scroll-timeline怎么使用

2、通過設定一個 transform: scaleX(0) 到 transform: scaleX(1) 的動畫，并且將它與 body 的滾動相綁定，即可得到滾動指示器，效果如下：

CSS動畫新特性@scroll-timeline怎么使用

使用 scroll-offsets 精確控制動畫觸發(fā)時機

大家可以再看看上面的 Gif 圖，都有一個問題，就是動畫的開始時間都是從滾動一開始就開始了，剛好在滾動結(jié)束時結(jié)束。那么如果我希望動畫在滾動的特定階段觸發(fā)，那該怎么辦呢？

這里，就需要借助 scroll-offsets，去更加精確的控制我們的動畫。

在滾動過程中，我們可以將一個元素，劃分為 3 個區(qū)域：

在這里，我們就可以得到兩個邊界，上方邊界，下方邊界：

CSS動畫新特性@scroll-timeline怎么使用

而對于上下兩個邊界，又會有兩種狀態(tài)。以上邊界為例子，會有：

對于這兩種狀態(tài)，我們用 start 0 和 start 1 表示，同理，下方的邊界也可以用 end 0 和 end 1 表示：

CSS動畫新特性@scroll-timeline怎么使用

這里的 0 和 1 實際表示的是，元素滾動中預期可見的百分比。

有了這些狀態(tài)值，配合 scroll-offsets，我們就可以精確控制滾動動畫的觸發(fā)時間。

我們設定一個從左向右并且伴隨透明度變化的動畫，的看看下面幾種情況：

1、滾動動畫在元素從下方開始出現(xiàn)時開始，完全出現(xià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、滾動動畫在元素從下方完全出現(xià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、滾動動畫在元素滾動到上方即將離開屏幕后開始，完全離開屏幕后截止：

動畫運行范圍：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 的用法是靈活運用滾動時間線的關鍵，當然，在上面你還會看到 start: selector(#g-box) start 1 和 end: selector(#g-box) start 0 這種寫法，這是規(guī)范歷史遺留問題，最新的規(guī)范已經(jīng)使用了 scroll-offsets 去替代 start: 和 end: 的寫法。

使用 @scroll-timeline 實現(xiàn)各類效果

在能夠掌握 @scroll-timeline 的各個語法之后，我們就可以開始使用它創(chuàng)造各種動畫效果了。

@scroll-timeline 的實驗室特性與特性檢測

@scroll-timeline 雖好，目前仍處于實驗室特性時間，Chrome 從 85 版本開始支持，但是默認是關閉的。

在最新的 chrome、Edge、Opera 可以通過瀏覽器配置開啟該特性，Chrome 下開啟該特性需要：

美酒雖好，但是離完全能用，瀏覽器大規(guī)模支持還需要等待一會，給時間一點時間吧！

特性檢測

基于目前的兼容性問題，我們可以通過瀏覽器的特性檢測 @supports 語法，來漸進增強使用該功能。

特性檢測的語法也非常簡單：

@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。

關于“CSS動畫新特性@scroll-timeline怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識，可以關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。


網(wǎng)頁名稱：CSS動畫新特性@scroll-timeline怎么使用
標題路徑：http://weahome.cn/article/gcjcdp.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部