CSS3 前沿特性 - CSS Scroll-Driven Animations

章节标题

CSS3 前沿特性 - CSS Scroll-Driven Animations

核心知识点讲解

基本概念

CSS Scroll-Driven Animations（滚动驱动动画）是 CSS3 中的一个前沿特性，它允许开发者创建基于用户滚动行为的动画效果。通过这种方式，动画的进度由页面的滚动位置控制，而不是由时间控制。

语法

基于滚动进度的动画

/* 定义滚动驱动的动画 */
@keyframes scroll-animation {
    from {
        /* 起始状态 */
    }
    to {
        /* 结束状态 */
    }
}

/* 应用滚动驱动的动画 */
.element {
    animation-name: scroll-animation;
    animation-duration: 1ms; /* 持续时间被忽略，由滚动控制 */
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: both;
    
    /* 使用滚动驱动 */
    animation-timeline: scroll(); /* 基于整个文档的滚动 */
    /* 或基于特定元素的滚动 */
    /* animation-timeline: scroll(element); */
}

基于视图进度的动画

/* 应用视图驱动的动画 */
.element {
    animation-name: view-animation;
    /* 其他动画属性 */
    
    /* 使用视图驱动 */
    animation-timeline: view();
    /* 可选：指定元素在视图中的哪个部分触发动画 */
    /* animation-range: entry 0% cover 100%; */
}

使用简写属性

/* 滚动驱动动画简写 */
.element {
    animation: scroll-animation 1ms linear both;
    animation-timeline: scroll();
}

/* 视图驱动动画简写 */
.element {
    animation: view-animation 1ms linear both;
    animation-timeline: view();
}

关键概念

  1. Animation Timeline（动画时间线）：

    • scroll()：基于滚动容器的滚动进度。
    • view()：基于元素在视图中的可见性。

  2. Animation Range（动画范围）：

    • 控制动画在滚动过程中的哪个阶段开始和结束。
    • 可以使用关键词（如 entry、cover、exit）或百分比值。

  3. Scroll Progress Timeline（滚动进度时间线）：

    • 动画进度与滚动位置成比例。
    • 当滚动容器滚动时，动画会相应地前进或后退。

  4. View Progress Timeline（视图进度时间线）：

    • 动画进度与元素在视图中的可见性成比例。
    • 当元素进入视图时动画开始，当元素离开视图时动画结束。

工作原理

  1. 滚动驱动动画：

    • 浏览器监听滚动容器的滚动事件。
    • 根据滚动位置计算动画的进度。
    • 将计算出的进度应用到动画上，更新元素的样式。

  2. 视图驱动动画：

    • 浏览器监听元素在视图中的可见性变化。
    • 根据元素在视图中的位置计算动画的进度。
    • 将计算出的进度应用到动画上，更新元素的样式。

浏览器兼容性

  • Chrome 115+、Edge 115+ 支持 CSS Scroll-Driven Animations。
  • Firefox 和 Safari 目前尚未支持，需要使用 polyfill 或其他替代方案。
  • 建议在使用时添加适当的降级方案，确保在不支持的浏览器中也能正常显示。

实用案例分析

案例一：基于滚动的元素变换

场景描述：创建一个基于页面滚动的元素变换效果，当用户滚动页面时，元素会逐渐旋转、缩放和改变透明度。

HTML 结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于滚动的元素变换</title>
    <link rel="stylesheet" href="scroll-transform.css">
</head>
<body>
    <header>
        <h1>基于滚动的元素变换</h1>
        <p>向下滚动页面查看效果</p>
    </header>
    
    <main>
        <section class="scroll-section">
            <div class="animated-element"></div>
        </section>
        
        <section class="content-section">
            <h2>滚动驱动动画</h2>
            <p>这是一个使用 CSS Scroll-Driven Animations 创建的动画效果。当你滚动页面时，上方的元素会根据滚动位置进行变换。</p>
            <p>CSS Scroll-Driven Animations 是一个前沿的 CSS 特性，它允许开发者创建基于用户滚动行为的动画效果，而不需要使用 JavaScript。</p>
            <p>通过这种方式，动画的进度由页面的滚动位置控制，而不是由时间控制，从而创建出更加自然和交互式的用户体验。</p>
        </section>
    </main>
    
    <footer>
        <p>© 2023 CSS3 前沿特性教程</p>
    </footer>
</body>
</html>

CSS 样式：

/* 基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
}

header {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 20px;
}

h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

header p {
    font-size: 1.2em;
    opacity: 0.8;
}

.scroll-section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ecf0f1;
    position: relative;
}

.animated-element {
    width: 200px;
    height: 200px;
    background-color: #3498db;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    
    /* 定义滚动驱动动画 */
    animation-name: scroll-transform;
    animation-duration: 1ms; /* 持续时间被忽略，由滚动控制 */
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    
    /* 使用滚动驱动 */
    animation-timeline: scroll();
}

/* 定义动画关键帧 */
@keyframes scroll-transform {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
        background-color: #3498db;
    }
    25% {
        transform: rotate(90deg) scale(1.2);
        opacity: 0.8;
        background-color: #e74c3c;
    }
    50% {
        transform: rotate(180deg) scale(1);
        opacity: 1;
        background-color: #2ecc71;
    }
    75% {
        transform: rotate(270deg) scale(0.8);
        opacity: 0.8;
        background-color: #f39c12;
    }
    100% {
        transform: rotate(360deg) scale(1);
        opacity: 1;
        background-color: #9b59b6;
    }
}

.content-section {
    padding: 100px 20px;
    max-width: 800px;
    margin: 0 auto;
    background-color: white;
}

.content-section h2 {
    font-size: 2em;
    margin-bottom: 30px;
    color: #2c3e50;
}

.content-section p {
    margin-bottom: 20px;
    font-size: 1.1em;
}

footer {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 30px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    h1 {
        font-size: 2em;
    }
    
    .content-section {
        padding: 60px 20px;
    }
    
    .content-section h2 {
        font-size: 1.8em;
    }
}

效果分析：

  • 当用户滚动页面时，.animated-element 元素会根据滚动位置进行变换。
  • 动画包括旋转、缩放、透明度变化和背景颜色变化。
  • 动画进度与页面滚动位置成比例，当用户向上滚动时，动画会反向播放。
  • 这个示例展示了如何使用基本的滚动驱动动画来创建基于滚动的视觉效果。

案例二：基于元素可见性的动画

场景描述：创建一个基于元素在视图中可见性的动画效果，当元素进入视图时触发动画，当元素离开视图时动画结束。

HTML 结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于元素可见性的动画</title>
    <link rel="stylesheet" href="view-driven-animations.css">
</head>
<body>
    <header>
        <h1>基于元素可见性的动画</h1>
        <p>向下滚动页面查看效果</p>
    </header>
    
    <main>
        <section class="intro-section">
            <h2>视图驱动动画</h2>
            <p>当元素进入视图时，它们会触发动画效果。继续向下滚动查看更多元素。</p>
        </section>
        
        <section class="cards-section">
            <div class="card">
                <div class="card-content">
                    <h3>卡片 1</h3>
                    <p>这是第一张卡片，当它进入视图时会触发动画。</p>
                </div>
            </div>
            
            <div class="card">
                <div class="card-content">
                    <h3>卡片 2</h3>
                    <p>这是第二张卡片，当它进入视图时会触发动画。</p>
                </div>
            </div>
            
            <div class="card">
                <div class="card-content">
                    <h3>卡片 3</h3>
                    <p>这是第三张卡片，当它进入视图时会触发动画。</p>
                </div>
            </div>
            
            <div class="card">
                <div class="card-content">
                    <h3>卡片 4</h3>
                    <p>这是第四张卡片，当它进入视图时会触发动画。</p>
                </div>
            </div>
        </section>
        
        <section class="conclusion-section">
            <h2>结论</h2>
            <p>视图驱动动画是一种强大的工具，可以用来创建更加交互式和引人入胜的网页体验。通过使用 CSS Scroll-Driven Animations，你可以轻松地为元素添加进入和退出动画，而不需要编写任何 JavaScript 代码。</p>
        </section>
    </main>
    
    <footer>
        <p>© 2023 CSS3 前沿特性教程</p>
    </footer>
</body>
</html>

CSS 样式：

/* 基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
}

header {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 20px;
}

h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

header p {
    font-size: 1.2em;
    opacity: 0.8;
}

.intro-section,
.conclusion-section {
    padding: 100px 20px;
    max-width: 800px;
    margin: 0 auto;
    background-color: white;
    text-align: center;
}

h2 {
    font-size: 2em;
    margin-bottom: 30px;
    color: #2c3e50;
}

.cards-section {
    padding: 100px 20px;
    background-color: #ecf0f1;
}

.card {
    max-width: 600px;
    margin: 50px auto;
    opacity: 0;
    transform: translateY(50px);
    
    /* 定义视图驱动动画 */
    animation-name: fade-in-up;
    animation-duration: 1ms; /* 持续时间被忽略，由视图控制 */
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    
    /* 使用视图驱动 */
    animation-timeline: view();
    /* 控制动画范围 */
    animation-range: entry 10% cover 50%;
}

.card-content {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card h3 {
    font-size: 1.5em;
    margin-bottom: 15px;
    color: #3498db;
}

/* 定义动画关键帧 */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

footer {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 30px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    h1 {
        font-size: 2em;
    }
    
    h2 {
        font-size: 1.8em;
    }
    
    .intro-section,
    .conclusion-section,
    .cards-section {
        padding: 60px 20px;
    }
    
    .card {
        margin: 30px auto;
    }
    
    .card-content {
        padding: 20px;
    }
}

效果分析：

  • 当用户滚动页面，卡片元素进入视图时，它们会触发 fade-in-up 动画，从下方淡入并向上移动。
  • 动画使用了 animation-range: entry 10% cover 50%，这意味着动画会在元素进入视图的 10% 时开始，在元素覆盖视图的 50% 时结束。
  • 每个卡片都会在进入视图时独立触发动画，创建出一种层次感和连续性。
  • 这个示例展示了如何使用视图驱动动画来创建元素进入视图时的过渡效果。

案例三：滚动视差效果

场景描述：创建一个使用滚动驱动动画实现的视差效果，使背景元素和前景元素以不同的速度滚动，从而创建出深度感。

HTML 结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动视差效果</title>
    <link rel="stylesheet" href="scroll-parallax.css">
</head>
<body>
    <header>
        <h1>滚动视差效果</h1>
        <p>向下滚动页面体验视差效果</p>
    </header>
    
    <main>
        <section class="parallax-section">
            <div class="parallax-bg"></div>
            <div class="parallax-content">
                <h2>视差滚动</h2>
                <p>背景以不同的速度滚动，创建出深度感和沉浸式体验。</p>
            </div>
        </section>
        
        <section class="content-section">
            <h2>视差效果原理</h2>
            <p>视差效果是通过让不同层次的元素以不同的速度滚动来创建的。在这个示例中，背景元素的滚动速度比前景内容慢，从而产生深度感。</p>
            <p>使用 CSS Scroll-Driven Animations，我们可以精确控制元素的滚动速度和动画效果，而不需要使用 JavaScript。</p>
        </section>
        
        <section class="parallax-section reverse">
            <div class="parallax-bg"></div>
            <div class="parallax-content">
                <h2>反向视差</h2>
                <p>这个部分使用了反向的视差效果，背景元素的滚动方向与前景内容相反。</p>
            </div>
        </section>
        
        <section class="content-section">
            <h2>结论</h2>
            <p>滚动驱动动画为创建视差效果提供了一种简洁而强大的方法。通过控制不同元素的滚动速度和动画效果，你可以创建出更加沉浸式和引人入胜的网页体验。</p>
        </section>
    </main>
    
    <footer>
        <p>© 2023 CSS3 前沿特性教程</p>
    </footer>
</body>
</html>

CSS 样式：

/* 基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
}

header {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    z-index: 1;
}

header p {
    font-size: 1.2em;
    opacity: 0.8;
    z-index: 1;
}

.parallax-section {
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    background-color: #34495e;
    color: white;
}

.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150%;
    background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=abstract%20background%20with%20blue%20and%20purple%20gradients%20for%20parallax%20effect&image_size=landscape_16_9');
    background-size: cover;
    background-position: center;
    
    /* 定义滚动驱动动画 */
    animation-name: parallax;
    animation-duration: 1ms; /* 持续时间被忽略，由滚动控制 */
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    
    /* 使用滚动驱动 */
    animation-timeline: scroll();
}

/* 反向视差 */
.parallax-section.reverse .parallax-bg {
    animation-name: parallax-reverse;
}

.parallax-content {
    text-align: center;
    padding: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    z-index: 1;
    max-width: 800px;
}

.parallax-content h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.content-section {
    padding: 100px 20px;
    max-width: 800px;
    margin: 0 auto;
    background-color: white;
}

.content-section h2 {
    font-size: 2em;
    margin-bottom: 30px;
    color: #2c3e50;
}

footer {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 30px;
}

/* 定义视差动画关键帧 */
@keyframes parallax {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-25%);
    }
}

@keyframes parallax-reverse {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(25%);
    }
}

/* 响应式调整 */
@media (max-width: 768px) {
    h1 {
        font-size: 2em;
    }
    
    .parallax-section {
        height: 60vh;
    }
    
    .parallax-content {
        padding: 20px;
    }
    
    .parallax-content h2 {
        font-size: 1.8em;
    }
    
    .content-section {
        padding: 60px 20px;
    }
    
    .content-section h2 {
        font-size: 1.8em;
    }
}

效果分析：

  • 页面包含两个视差滚动部分，背景图片以不同的速度滚动，创建出深度感。
  • 第一个视差部分，背景图片向上滚动，速度比页面内容慢。
  • 第二个视差部分（反向），背景图片向下滚动，与页面内容的滚动方向相反。
  • 动画使用了 animation-timeline: scroll()，使动画进度与页面滚动位置成比例。
  • 这个示例展示了如何使用滚动驱动动画来创建视差效果，而不需要使用 JavaScript。

总结

本教程介绍了 CSS3 的 Scroll-Driven Animations（滚动驱动动画）特性，主要内容包括：

  1. 基本概念：CSS Scroll-Driven Animations 允许开发者创建基于用户滚动行为的动画效果，动画的进度由页面的滚动位置或元素的可见性控制。

  2. 语法：

    • 使用 animation-timeline 属性指定动画的时间线（滚动驱动或视图驱动）。
    • 使用 animation-range 属性控制动画的开始和结束范围。
    • 定义常规的 @keyframes 动画来指定动画的具体效果。

  3. 关键概念：

    • 滚动进度时间线：动画进度与滚动位置成比例。
    • 视图进度时间线：动画进度与元素在视图中的可见性成比例。
    • 动画范围：控制动画在滚动过程中的哪个阶段开始和结束。

  4. 工作原理：

    • 浏览器监听滚动事件或元素可见性变化。
    • 根据滚动位置或元素可见性计算动画进度。
    • 将计算出的进度应用到动画上，更新元素的样式。

  5. 实用案例：

    • 基于滚动的元素变换。
    • 基于元素可见性的动画。
    • 滚动视差效果。

  6. 浏览器兼容性：

    • Chrome 115+、Edge 115+ 支持 CSS Scroll-Driven Animations。
    • Firefox 和 Safari 目前尚未支持，需要使用 polyfill 或其他替代方案。

通过使用 CSS Scroll-Driven Animations，开发者可以创建更加交互式和引人入胜的网页体验，而不需要编写复杂的 JavaScript 代码。这是一个非常有前景的 CSS 特性，值得在项目中尝试使用。

« 上一篇 CSS3 前沿特性 - CSS Cascade Layers (@layer) 下一篇 » CSS3 前沿特性 - CSS Anchor Positioning
↑