CSS系列（34）-- Scroll-driven Animations详解

前端技术探索系列：CSS Scroll-driven Animations详解 📜

致读者：探索滚动动画的艺术 👋

前端开发者们，

今天我们将深入探讨 CSS Scroll-driven Animations，这个强大的滚动动画特性。

基础概念 🚀

时间轴设置

/* 滚动时间轴 */
@scroll-timeline scroll-timeline-1 {source: auto;  /* 或指定元素 */orientation: vertical;  /* 或 horizontal */scroll-offsets: 0%, 100%;
}/* 视口时间轴 */
@scroll-timeline viewport-timeline {source: selector("#container");scroll-offsets: selector("#start") start,selector("#end") end;
}/* 应用时间轴 */
.animated-element {animation: slide-in 1s linear;animation-timeline: scroll-timeline-1;
}

进度映射

/* 基础映射 */
.progress-element {scale: calc(100% + (var(--scroll-progress) * 0.5));opacity: var(--scroll-progress);
}/* 自定义映射 */
@keyframes parallax {from {transform: translateY(0);}to {transform: translateY(-20%);}
}.parallax-bg {animation: parallax linear;animation-timeline: scroll();animation-range: entry 50% cover 50%;
}

高级特性 🎯

视口交互

/* 元素进入视口 */
@keyframes fade-in {from {opacity: 0;transform: translateY(20px);}to {opacity: 1;transform: translateY(0);}
}.fade-element {animation: fade-in linear;animation-timeline: view();animation-range: entry 20% cover 50%;
}/* 视口追踪 */
.track-element {animation: track-position linear;animation-timeline: view();animation-range: contain;
}

组合动画

/* 多重动画 */
.complex-animation {animation: scale-up linear,fade-in linear,rotate-in linear;animation-timeline: scroll();animation-range: entry 25% cover 75%,entry 0% cover 50%,entry 50% cover 100%;
}/* 交错动画 */
.stagger-item {animation: slide-in linear;animation-timeline: view();animation-range: entry 20% cover 60%;animation-delay: calc(var(--index) * 100ms);
}

实际应用 💫

视差滚动

/* 多层视差 */
.parallax-container {perspective: 1000px;
}.parallax-layer-1 {animation: parallax-1 linear;animation-timeline: scroll();animation-range: entry exit;
}.parallax-layer-2 {animation: parallax-2 linear;animation-timeline: scroll();animation-range: entry exit;
}@keyframes parallax-1 {from { transform: translateZ(0); }to { transform: translateZ(-100px); }
}@keyframes parallax-2 {from { transform: translateZ(0); }to { transform: translateZ(-200px); }
}

滚动进度

/* 进度指示器 */
.progress-bar {transform-origin: left;scale: var(--scroll-progress) 1;
}/* 章节导航 */
.section-nav {position: fixed;right: 20px;
}.nav-item {opacity: calc(1 - abs(var(--section-progress) - 0.5) * 2);transform: scale(calc(1 + var(--section-progress) * 0.2));
}

性能优化 ⚡

渲染优化

/* GPU加速 */
.optimized-animation {will-change: transform;transform: translateZ(0);
}/* 合成层优化 */
.composite-layer {transform: translate3d(0,0,0);backface-visibility: hidden;
}/* 动画节流 */
.throttled-animation {animation-timeline: scroll();animation-range: entry 10% exit 90%;animation-timing-function: steps(10);
}

条件加载

/* 性能检测 */
@supports (animation-timeline: scroll()) {.scroll-animation {animation: slide linear;animation-timeline: scroll();}
}/* 降级处理 */
@supports not (animation-timeline: scroll()) {.scroll-animation {opacity: 1;transform: none;}
}