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

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