Web动画API与滚动驱动动画：掌握新语法实现多元素独立动画-js教程-PHP中文网

Web动画API与滚动驱动动画：掌握新语法实现多元素独立动画

花韻仙語

发布： 2025-08-19 13:54:01

原创

747人浏览过

web动画api与滚动驱动动画：掌握新语法实现多元素独立动画

本文深入探讨Web动画API与滚动驱动动画的实现，特别针对旧语法导致多元素动画失效的问题。我们将详细介绍滚动驱动动画规范的最新变化，包括animation-timeline、scroll-timeline等核心CSS属性，并通过示例代码演示如何正确地为多个元素创建独立的、基于视口进出的动画效果，确保动画按预期触发并流畅运行，同时支持反向滚动时的动画回放。

引言：滚动驱动动画的魅力

滚动驱动动画（Scroll-Driven Animations）是一种强大的Web动画技术，它允许开发者将元素的动画进度与滚动容器的滚动位置或元素在视口中的可见性关联起来。这意味着动画不再仅仅是基于时间线播放，而是可以随着用户的滚动行为而实时控制，从而创造出更具互动性和沉浸感的网页体验，例如视差滚动、元素渐显/渐隐、进度条等。

语法演进：告别旧版@scroll-timeline

在滚动驱动动画的早期实验阶段，曾出现过一些提案语法，例如@scroll-timeline。然而，Web标准是一个不断演进的过程，随着规范的成熟，其语法也经历了重大重写。因此，许多早期的示例代码（如某些Codepen上的演示）可能不再兼容当前的浏览器实现。

这正是导致多元素动画可能无法按预期工作（例如仅一个元素动画或所有元素同时动画）的根本原因。开发者如果尝试使用旧的@scroll-timeline语法，将会发现其无效。重要的是，滚动驱动动画的核心概念依然存在，只是实现方式和所使用的CSS属性发生了变化。

为了掌握最新的语法和最佳实践，建议参考MDN Web Docs、Chrome开发者文档以及scroll-driven-animations.style等官方资源。

核心概念：新版滚动驱动动画CSS属性

当前，实现滚动驱动动画主要依赖以下核心CSS属性：

animation-timeline: 这是将CSS动画（通过@keyframes定义）与特定滚动时间线关联起来的关键属性。它可以接受预定义的关键字（如scroll()或view()）或通过scroll-timeline-name定义的命名时间线。
scroll-timeline: 这个属性用于在滚动容器上定义一个滚动时间线。它通常与scroll-timeline-name和scroll-timeline-axis一起使用。
scroll-timeline-name: 为scroll-timeline指定一个唯一的名称，以便animation-timeline可以引用它。
scroll-timeline-axis: 定义滚动时间线所监听的滚动轴向，可以是block（垂直滚动，默认）、inline（水平滚动）、x或y。
animation-range: 这是实现精细控制动画播放范围的核心属性。它定义了动画的0%到100%对应于滚动时间线上的哪个阶段。animation-range可以基于滚动容器的整体滚动进度，也可以基于元素在视口中的可见性（通过entry、exit、cover、contain等关键字）。

实战：实现多元素独立滚动动画

本节将演示如何使用新版语法实现一个常见需求：当多个元素逐个进入视口时，它们各自渐显；当反向滚动离开视口时，它们各自渐隐。

萌动AI

CreateAI旗下AI动漫视频生成平台

438

查看详情

目标分析

我们的目标是让每个“盔甲片”（或任何独立元素）在进入视口时渐入，并在离开视口时渐出，同时支持反向滚动时的动画回放。这意味着每个元素的动画都应独立于其他元素，并基于其自身的视口可见性来驱动。

HTML结构

首先，我们需要一个包含多个可滚动元素的容器：

<div class="scroll-container">
    <div class="item">盔甲片 1</div>
    <div class="item">盔甲片 2</div>
    <div class="item">盔甲片 3</div>
    <div class="item">盔甲片 4</div>
    <div class="item">盔甲片 5</div>
    <div class="item">盔甲片 6</div>
    <div class="item">盔甲片 7</div>
    <div class="item">盔甲片 8</div>
    <!-- 更多盔甲片 -->
</div>

登录后复制

CSS动画定义

定义一个CSS @keyframes 动画，用于实现元素的渐显和渐隐效果。这个动画的0%表示完全透明并稍微位移，中间部分表示完全不透明且正常位置，100%再次回到透明和位移状态。

@keyframes fade-in-out-on-scroll {
    0% { /* 动画开始时 */
        opacity: 0;
        transform: translateY(20px);
    }
    20% { /* 进入视口并开始完全显示 */
        opacity: 1;
        transform: translateY(0);
    }
    80% { /* 在视口中完全显示 */
        opacity: 1;
        transform: translateY(0);
    }
    100% { /* 离开视口时 */
        opacity: 0;
        transform: translateY(20px);
    }
}

登录后复制

关键：链接动画到视口时间线

为了实现每个元素独立动画，我们将使用animation-timeline: view()。view()时间线是一种特殊的匿名时间线，它会跟踪元素自身在最近的滚动容器（或文档根）中的可见性。结合animation-range，我们可以精确控制动画的触发时机。

.scroll-container {
    height: 600px; /* 定义容器高度，使其可滚动 */
    overflow-y: scroll; /* 启用垂直滚动 */
    border: 1px solid #ccc;
    padding: 20px;
    background-color: #f9f9f9;
}

.item {
    height: 150px; /* 每个元素的高度 */
    margin-bottom: 80px; /* 元素间距，确保滚动时有足够空间 */
    background-color: #007bff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    /* 初始状态：透明且稍微向下位移 */
    opacity: 0;
    transform: translateY(20px);

    /* 应用动画 */
    animation: fade-in-out-on-scroll linear forwards; /* 'forwards' 确保动画结束后保持最终状态 */
    animation-timeline: view(); /* 将动画与元素的视口可见性关联 */

    /* 定义动画播放范围 */
    /*
     * animation-range: entry 0% exit 100%;
     * 解释：
     * - entry 0%: 元素的顶部边缘刚进入滚动容器的底部边缘时，对应动画的0%。
     * - exit 100%: 元素的底部边缘刚离开滚动容器的顶部边缘时，对应动画的100%。
     * 这样，整个动画（0%-100%）将映射到元素从进入视口到完全离开视口的全过程。
     */
    animation-range: entry 0% exit 100%;
}

登录后复制

通过animation-timeline: view()，每个.item元素都会拥有自己独立的、基于其自身在.scroll-container中可见性的滚动时间线。当一个.item进入视口时，它的动画将从0%开始播放；当它离开视口时，动画将达到100%。由于animation-range的设置，fade-in-out-on-scroll动画的0%和100%分别对应元素的进入和退出视口，中间的关键帧则控制了渐显和渐隐的过渡。

完整的示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多元素滚动驱动动画示例</title>
    <style>
        body

登录后复制

以上就是Web动画API与滚动驱动动画：掌握新语法实现多元素独立动画的详细内容，更多请关注php中文网其它相关文章！