CSS系列（47）-- Animation Timeline详解

news2025/1/4 9:20:01

前端技术探索系列：CSS Animation Timeline详解 ⏱️

致读者：探索动画时间线的艺术 👋

前端开发者们，

今天我们将深入探讨 CSS Animation Timeline，这个强大的动画控制特性。

基础概念 🚀

时间线定义

/* 滚动时间线 */
@scroll-timeline scroll-tl {
    source: auto;
    orientation: vertical;
    scroll-offsets: 0%, 100%;
}

/* 视图时间线 */
@view-timeline view-tl {
    subject: .target-element;
    axis: block;
    inset: 20%;
}

/* 命名时间线 */
.scroller {
    scroll-timeline-name: --main-scroll;
    scroll-timeline-axis: vertical;
}

动画绑定

/* 基础绑定 */
.animated-element {
    animation: slide-in 1s linear;
    animation-timeline: scroll-tl;
}

/* 视图绑定 */
.view-animated {
    animation: fade-in 1s ease-out;
    animation-timeline: view-tl;
}

/* 进度映射 */
.progress-element {
    animation: scale-up 1s linear;
    animation-range: entry 25% cover 75%;
}

高级特性 🎯

滚动动画

/* 滚动进度 */
.scroll-progress {
    transform-origin: left;
    animation: scale-x 1s linear;
    animation-timeline: --main-scroll;
}

@keyframes scale-x {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* 视差效果 */
.parallax {
    animation: parallax-scroll 1s linear;
    animation-timeline: --scroll;
    animation-range: entry exit;
}

@keyframes parallax-scroll {
    from { transform: translateY(0); }
    to { transform: translateY(-20%); }
}

视图动画

/* 元素出现 */
.fade-element {
    opacity: 0;
    animation: fade 1s linear;
    animation-timeline: view();
    animation-range: entry 20% cover 40%;
}

@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 连续动画 */
.sequence {
    animation: sequence 1s linear;
    animation-timeline: view();
    animation-range: contain;
}

@keyframes sequence {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(0); }
    100% { transform: translateX(100%); }
}

实际应用 💫

滚动指示器

/* 进度条 */
.scroll-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #4CAF50;
    transform-origin: left;
    animation: progress-grow 1s linear;
    animation-timeline: scroll(root);
}

@keyframes progress-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* 章节导航 */
.section-nav {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.nav-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ddd;
    animation: dot-highlight 1s linear;
    animation-timeline: view(nearest section);
    animation-range: contain;
}

@keyframes dot-highlight {
    from { background: #ddd; }
    to { background: #4CAF50; }
}

内容展示

/* 卡片展示 */
.card-reveal {
    opacity: 0;
    transform: translateY(20px);
    animation: reveal 1s ease-out;
    animation-timeline: view();
    animation-range: entry 20% cover 50%;
}

@keyframes reveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 图片画廊 */
.gallery-item {
    --delay: calc(var(--index) * 100ms);
    
    opacity: 0;
    animation: slide-up 1s ease-out;
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
    animation-delay: var(--delay);
}

@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

性能优化 ⚡

渲染优化

/* 性能提升 */
.optimized {
    will-change: transform;
    contain: layout style;
    
    animation: optimize 1s linear;
    animation-timeline: scroll(root);
    animation-range: entry exit;
}

/* 条件加载 */
@supports (animation-timeline: scroll(root)) {
    .enhanced {
        animation-timeline: scroll(root);
    }
}

动画控制

/* 暂停控制 */
.pausable {
    animation-play-state: paused;
    
    &:hover {
        animation-play-state: running;
    }
}

/* 性能降级 */
@media (prefers-reduced-motion: reduce) {
    .motion-sensitive {
        animation: none;
    }
}