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

news2024/12/25 2:53:35

前端技术探索系列：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;
    }
}