CSS アニメーションの新機能について詳しくは、@scroll-timeline をご覧ください。-CSSチュートリアル-php.cn

前回の記事「2022 年に知っておきたいいくつかの CSS の新機能 (収集と学習)」では、いくつかの CSS の新機能を簡単に紹介しましたが、今日はそのうちの 1 つについて説明します。 Depth. 新機能 (アニメーションキラー): @scroll-timeline、皆さんのお役に立てれば幸いです。

CSS アニメーションの新機能について詳しくは、@scroll-timeline をご覧ください。

CSS 仕様スクロールリンクアニメーションでは、画期的な CSS 機能が導入されています。それは -- @scroll-timeline at-rule で、文字通りに訳すと スクロールタイムライン となります。

この記事では、CSS @scroll-timeline の使い方の開始から学習までをすべて説明します。 (推奨される学習: css ビデオチュートリアル )

@scroll-timeline スクロールタイムラインとは何ですか?

@scroll-timeline とは何ですか? スクロールタイムラインとは何ですか?

@scroll-timeline アニメーションの開始と終了が、時間ではなく、スクロールコンテナ内のスクロールの進行状況によって決定されるように設定できます。

つまり、アニメーション効果を定義でき、コンテナをスクロールすることでアニメーションの開始と終了を制御できます。

提案のデモ

文法を体系的に学習する前に、デモを使用してその使用法を簡単に理解します。

最初に

シンプルなフォント F 回転アニメーションを実装します :

<div id="g-box">F</div>

ログイン後にコピー

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

ログイン後にコピー

通常、これは非常に単純なアニメーションです:

CSS アニメーションの新機能について詳しくは、@scroll-timeline をご覧ください。

次に、このアニメーションを

@scroll-timeline と組み合わせます。、スクロール可能なコンテナに配置する必要があります:


    <div id="g-box">F</div>

ログイン後にコピー

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

ログイン後にコピー

ここでは、スクロール可能なコンテナ

#g-content を実装しました。その高さは 170vh です。ビジュアルインターフェイスの高さの 1.7 倍、#g-box コンテナは上から 70vh の高さに配置されます。：

CSS アニメーションの新機能について詳しくは、@scroll-timeline をご覧ください。

興味深いのは、設定した回転アニメーションは自動的に開始されないことです。アニメーションは下にスクロールしたときにのみ開始されます。実際の効果 Gif:

CSS アニメーションの新機能について詳しくは、@scroll-timeline をご覧ください。

CodePen デモ -- @scroll-timeline デモ
https://codepen.io/Chokcoco/pen/JjOZMaQ

これを見れば誰でも役割を理解できるはずです

@scroll-timeline の意味と意味 これにより、スクロールバーのスクロールに基づいてアニメーションの進行を制御する機能が CSS に与えられます。＃＃＃すばらしい！！ @scroll-timeline 構文の概要

次に、

@scroll-timeline

の構文を簡単に見てみましょう。

@scroll-timeline

を使用するには、@scroll-timeline ルールを定義することが最も重要です: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;">@scroll-timeline moveTimeline { source: selector("#g-content"); orientation: vertical; scroll-offsets: 0px, 500px; }</pre><div class="contentsignin">ログイン後にコピー</div></div>その中には:

source：绑定触发滚动动画的滚动容器
- source: auto：绑定到 Document，也就是全局 Windows 对象
- source: selector("id-selector")，通过 selector()，内置一个 #id 选择器，选取一个可滚动容器
- source: none：不指的滚动容器
orientation：设定滚动时间线的方向
- orientation: auto：默认为 vertical，也就是竖直方向的滚动
- orientation: vertical：竖直方向的滚动
- orientation: horizontal：水平方向的滚动
- orientation: block：不太常用，使用沿块轴的滚动位置，符合书写模式和方向性
- orientation: inline：不太常用，使用沿内联轴的滚动位置，符合书写模式和方向性
scroll-offsets：滚动时间线的核心，设定在滚动的什么阶段，触发动画，可通过三种方式之一进行设置：
- scroll-offsets: none 这意味着没有 scroll-offset 指定。
- 由逗号分隔的 length-percentage 值列表确定。每个值都映射到animation-duration。例如，如果 ananimation-duration 设置为 2s 且滚动偏移量为 0px, 30px, 100px，则在 1s 时，滚动偏移量将为 30px。
- 第三种确定滚动偏移量的方法是使用元素偏移量。这意味着可以指定页面内的元素，其位置决定了滚动时间线以及要使用这些元素的哪个边缘。指定元素是使用 selector() 函数完成的，该函数接收元素的 id。边缘由关键字 start 或确定 end。可选的阈值的 0–1 可用于表示元素滚动中预期可见的百分比。

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 实现滚动进度指示器

之前在不可思议的纯 CSS 滚动进度条效果一文中，我们介绍了一种使用渐变实现的纯 CSS 滚动进度指示器效果：

CSS アニメーションの新機能について詳しくは、@scroll-timeline をご覧ください。

该方法有些小小的瑕疵。其中一个就是当滚动距离太短的时候，进度条右侧会有明显的斜边效果。

而有了 @scroll-timeline 之后，我们终于可以将滚动和动画这两个元素绑定起来，再实现滚动进度指示器，就已经非常轻松了：

<div id="g-container">
    <p>...文本内容...</p>
</div>

ログイン後にコピー

#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、我们在页面最上方，通过一个伪元素，实现一个占满屏幕 100% 的 5px 高的进度条。正常而言是这样：

CSS アニメーションの新機能について詳しくは、@scroll-timeline をご覧ください。

2、通过设定一个 transform: scaleX(0) 到 transform: scaleX(1) 的动画，并且将它与 body 的滚动相绑定，即可得到滚动指示器，效果如下：

CSS アニメーションの新機能について詳しくは、@scroll-timeline をご覧ください。

完整的代码，你可以戳这里：CodePen Demo - 使用 @scroll-timeline 实现滚动进度条
https://codepen.io/Chokcoco/pen/eYeKLMj

使用 scroll-offsets 精确控制动画触发时机

大家可以再看看上面的 Gif 图，都有一个问题，就是动画的开始时间都是从滚动一开始就开始了，刚好在滚动结束时结束。那么如果我希望动画在滚动的特定阶段触发，那该怎么办呢？

这里，就需要借助 scroll-offsets，去更加精确的控制我们的动画。

在滚动过程中，我们可以将一个元素，划分为 3 个区域：

滚动过程中，从上方视野盲区，进入视野
滚动过程中，处于视野中
滚动过程中，从视野中，进入下方视野盲区

在这里，我们就可以得到两个边界，上方边界，下方边界：

CSS アニメーションの新機能について詳しくは、@scroll-timeline をご覧ください。

而对于上下两个边界，又会有两种状态。以上边界为例子，会有：

元素刚刚开始进入可视区
元素完全进入可视区

对于这两种状态，我们用 start 0 和 start 1 表示，同理，下方的边界也可以用 end 0 和 end 1 表示：

CSS アニメーションの新機能について詳しくは、@scroll-timeline をご覧ください。

这里的 0 和 1 实际表示的是，元素滚动中预期可见的百分比。

有了这些状态值，配合 scroll-offsets，我们就可以精确控制滚动动画的触发时间。

我们设定一个从左向右并且伴随透明度变化的动画，的看看下面几种情况：

1、滚动动画在元素从下方开始出现时开始，完全出现后截止。

动画运行范围：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;
}

ログイン後にコピー

效果如下：

CSS アニメーションの新機能について詳しくは、@scroll-timeline をご覧ください。

2、滚动动画在元素从下方完全出现时开始，在滚动到上方即将离开屏幕后截止：

动画运行范围：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;
}
// ...

ログイン後にコピー

效果如下：

CSS アニメーションの新機能について詳しくは、@scroll-timeline をご覧ください。

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;
}
// ...

ログイン後にコピー

效果如下：

1CSS アニメーションの新機能について詳しくは、@scroll-timeline をご覧ください。

掌握 scroll-offsets 的用法是灵活运用滚动时间线的关键，当然，在上面你还会看到 start: selector(#g-box) start 1 和 end: selector(#g-box) start 0 这种写法，这是规范历史遗留问题，最新的规范已经使用了 scroll-offsets 去替代 start: 和 end: 的写法。

把上述 3 种情况放在一起，再比较比较：

1CSS アニメーションの新機能について詳しくは、@scroll-timeline をご覧ください。

完整的代码，你可以戳这里：CodePen Demo - @scroll-timeline Demo | element-based offset

使用 @scroll-timeline 实现各类效果

在能够掌握 @scroll-timeline 的各个语法之后，我们就可以开始使用它创造各种动画效果了。

譬如如下的，滚动内容不断划入：

1CSS アニメーションの新機能について詳しくは、@scroll-timeline をご覧ください。

代码较长，可以戳这里，来自 bramus 的 Codepen CodePen Demo -- Fly-in Contact List (CSS @scroll-timeline version)
https://codepen.io/bramus/pen/bGwJVzg

甚至可以结合 scroll-snap-type 制作一些全屏滚动的大屏特效动画：

1CSS アニメーションの新機能について詳しくは、@scroll-timeline をご覧ください。

要知道，这在以前，是完全不可能利用纯 CSS 实现的。完整的代码你可以戳这里：CodePen Demo -- CSS Scroll-Timeline Split Screen Carousel
https://codepen.io/Chokcoco/pen/QWOrPdM

简而言之，任何动画效果，如今，都可以和滚动相结合起来，甚至乎是配合 SVG 元素也不例外，这里我还简单改造了一下之前的一个 SVG 线条动画：

1CSS アニメーションの新機能について詳しくは、@scroll-timeline をご覧ください。

完整的代码你可以戳这里：CodePen Demo -- SVG Text Line Effect | Scroll Timeline
https://codepen.io/Chokcoco/pen/wvPxbRm

@scroll-timeline 的实验室特性与特性检测

@scroll-timeline 虽好，目前仍处于实验室特性时间，Chrome 从 85 版本开始支持，但是默认是关闭的。

兼容性如下(2022-03-07):

1CSS アニメーションの新機能について詳しくは、@scroll-timeline をご覧ください。

在最新的 chrome、Edge、Opera 可以通过浏览器配置开启该特性，Chrome 下开启该特性需要：

浏览器 URL 框输入 chrome://flags
开启 #enable-experimental-web-platform-features

美酒虽好，但是离完全能用，浏览器大规模支持还需要等待一会，给时间一点时间吧！

特性检测

基于目前的兼容性问题，我们可以通过浏览器的特性检测 @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。