动画-视口时间线

参考文章:【HTML+CSS】一个动画，让页面高级起来

这样写滚动动画就很好的优化了js写滚动动画的性能。（而且更丝滑orz

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 定义动画关键帧 */
@keyframes grow {
    from {
        opacity: 0;
        box-shadow: none;
        transform: scale(.8);
        filter: blur(10px)
    }
}

.recent-post-item {
    background: linear-gradient(90deg, rgba(167, 223, 255, 0.32), rgb(255, 255, 255)) !important;
    /*animation-fill-mode: forwards;*/
    /*animation-play-state: paused; !* 默认暂停动画 *!*/
    animation-name: grow;
    animation-fill-mode: both;
    /* 使用浏览器的视图时间线,允许动画根据视口的变化进行同步 */
    animation-timeline: view();
    /* 定义动画时间范围 */
    animation-range: contain 0% contain 40%;
    transition: box-shadow 0.2s ease;
}

动画与视口时间线animation-timeline: view();同步，动画随着鼠标滚动而变化。

具体解析

在CSS中，animation-timeline 和 animation-range 是两个实验性的属性，它们用于控制动画如何与浏览器的视图时间线（viewport
timeline）同步。这些属性目前并不是所有浏览器都支持的标准CSS属性，但它们提供了一种方式来创建与视口变化相关的动画效果。

animation-timeline

animation-timeline: view();

这个属性指定了动画应该与浏览器的视图时间线同步。视图时间线通常与视口的变化（如滚动）相关。使用 view() 函数可以确保动画根据视口的变化进行同步。
这意味着当用户滚动页面时，动画会根据滚动的位置和速度进行调整。

animation-range

animation-range: contain 0% contain 50%;

这个属性定义了动画的时间范围，即动画在时间线上的哪些部分应该被播放。animation-range 接受一系列的关键词和百分比值，用于指定动画的播放区间。

  • contain：这个关键词表示动画应该包含指定的时间范围。如果时间线进入或离开这个范围，动画会相应地开始或结束。
  • 0% 和 50%：这些百分比值表示时间线上的位置。在这个例子中，动画将在时间线从开始到50%的位置之间播放。

综合起来，animation-range: contain 0% contain 50%; 表示动画将在时间线从开始到50%的位置之间播放，并且当时间线进入或离开这个范围时，动画会开始或结束。

示例

假设你有一个元素，你想让它在用户滚动页面时产生动画效果，并且这个动画只在页面滚动的前半部分时间内播放。你可以这样设置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.element {
    /* 其他样式 */

    /* 动画与视图时间线同步 */
    animation-timeline: view();

    /* 动画在时间线的前半部分播放 */
    animation-range: contain 0% contain 50%;
}

@keyframes example-animation {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(100px);
    }
}

在这个例子中，当用户滚动页面并且视口处于页面的前半部分时，.element 元素会沿着Y轴向下移动100像素。

请注意，由于这些属性是实验性的，你可能需要使用特定的浏览器前缀或者启用实验性功能标志才能在某些浏览器中使用它们。

动画属性补充

当然可以！CSS 动画涉及多个属性，每个属性都有其特定的作用。以下是对这些属性的详细解释，特别是 animation-fill-mode：

1. animation-name

  • 作用：指定要应用于元素的动画名称。
  • 示例：animation-name: myAnimation;

2. animation-duration

  • 作用：定义动画完成一个周期所需的时间。
  • 示例：animation-duration: 2s;

3. animation-timing-function

  • 作用：定义动画的速度曲线，即动画在不同时间点的速度变化。
  • 常用值：
    • linear：匀速
    • ease：缓入缓出
    • ease-in：缓入
    • ease-out：缓出
    • ease-in-out：缓入缓出
    • cubic-bezier(n, n, n, n)：自定义贝塞尔曲线
  • 示例：animation-timing-function: ease-in-out;

4. animation-delay

  • 作用：定义动画开始之前的延迟时间。
  • 示例：animation-delay: 1s;

5. animation-iteration-count

  • 作用：定义动画播放的次数。
  • 常用值：
    • infinite：无限次
    • 数字：指定次数
  • 示例：animation-iteration-count: infinite;

6. animation-direction

  • 作用：定义动画是否在每次迭代后反向播放。
  • 常用值：
    • normal：正常播放
    • reverse：反向播放
    • alternate：交替正向和反向播放
    • alternate-reverse：交替反向和正向播放
  • 示例：animation-direction: alternate;

7. animation-fill-mode

  • 作用：定义动画在开始前和结束后如何应用样式。
  • 常用值：
    • none：默认值，动画结束后回到初始状态。
    • forwards：动画结束后保持最后一帧的样式。
    • backwards：动画开始前应用第一帧的样式。
    • both：同时应用 forwards 和 backwards 的效果。
  • 示例：animation-fill-mode: forwards;

8. animation-play-state

  • 作用：定义动画是否正在运行或暂停。
  • 常用值：
    • running：动画正在运行（默认值）
    • paused：动画暂停
  • 示例：animation-play-state: paused;

9. animation-timeline（实验性）

  • 作用：指定动画与浏览器的视图时间线同步。
  • 示例：animation-timeline: view();

10. animation-range（实验性）

  • 作用：定义动画在时间线上的播放范围。
  • 示例：animation-range: contain 0% contain 100%;

综合示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.element {
    animation-name: myAnimation;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-timeline: view();
    animation-range: contain 0% contain 100%;
}

@keyframes myAnimation {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(100px);
    }
}

个人认为fill-mode的三个属性最难理解，所以我建议三个都轮着试一遍，不出意外的话是both

在这个示例中：

  • myAnimation 动画会在元素进入视口时开始，并且无限次交替正向和反向播放。
  • 动画持续时间为2秒，速度曲线为缓入缓出，延迟1秒开始。
  • 动画结束后保持最后一帧的样式（即元素向下移动100像素）。

希望这些解释对你有所帮助！如果有任何进一步的问题，请随时提问。

圣诞树