用 IntersectionObserver 实现滚动触发动画时间线最稳定：设 threshold 为 [0, 0.1] 提前触发，配合 transition 而非 animation 实现进退双向动画，用 data-position 替代 nth-child 避免布局错位，移动端加 rootMargin 适配 Safari 惯性。
纯 CSS + HTML 就能做出滚动触发动画的时间线，不需要库、不依赖 Canvas，但关键点在于「触发时机」和「动画复位」——很多人卡在元素滚进视口后只动一次、再滚上去不重置，或者用 scroll 事件手写判断导致卡顿。
用 IntersectionObserver 实现懒加载式滚动动画
这是目前最稳、性能最好、兼容性也够用（Chrome 63+/Firefox 55+/Safari 12.1+）的方式。它不监听 scroll，而是让浏览器主动通知某个元素是否进入/离开可视区。
-
IntersectionObserver的threshold设为[0, 0.1]，能让元素刚露头 10% 就触发，比等完全进入更自然 - 每个
.timeline-item初始加opacity: 0; transform: translateY(20px);，动画类只负责过渡效果 - 必须在回调里检查
entry.isIntersecting，否则滚动来回时会重复添加 class - 移动端需加
rootMargin: '0px 0px -50px 0px'补偿 Safari 滚动惯性导致的误判
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-in');
// 可选：触发后停止观察，避免反复回调
observer.unobserve(entry.target);
}
});
}, { threshold: [0, 0.1], rootMargin: '0px 0px -50px 0px' });
document.querySelectorAll('.timeline-item').forEach(el => observer.observe(el));
CSS 动画类要配 transition 而不是 animation
用 @keyframes 写 animation 容易出问题：一旦 class 加上就立刻播完，无法响应「再次进入」；而 transition 配合 class 切换，天然支持进退双向。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 不要写
animation: slideIn 0.6s ease-out;这种一次性动画 - 改用
transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); -
cubic-bezier(0.34, 1.56, 0.64, 1)是轻微回弹的缓动，比ease-out更有“浮现感” - 确保
.timeline-item有will-change: opacity, transform;（仅对频繁动画项加）
左右交替布局时，nth-child 偶奇错位是常见坑
垂直时间线常要求内容块在中线两侧交错排列，但直接用 :nth-child(odd) 和 :nth-child(even) 在语义化结构（比如 <ul><li></ul>）里容易失效——因为中间可能插了注释、空格文本节点，或用了 <time></time> 等嵌套标签。
立即学习“前端免费学习笔记（深入）”；
- 稳妥做法是给每个
<li>或<div class="timeline-item"> 手动加 <code>data-position="left"或data-position="right" - CSS 改用
[data-position="left"] { align-self: flex-start; }，彻底绕过伪类计算偏差 - 如果坚持用
:nth-child，务必确认父容器下只有目标元素，无其他节点干扰 - 移动端建议统一为单侧布局，用
@media (max-width: 768px)强制所有.timeline-content左对齐
真正难的不是让元素动起来，而是让它们「动得恰到好处」：太早出现像偷跑，太晚像卡顿，动完不复位又显得僵硬。IntersectionObserver + transition + 显式 data 属性，这三样组合下来，基本覆盖 95% 的实际场景，剩下的 5% 往往是需求本身没想清——比如要不要支持时间轴缩放、拖拽、点击定位到某年份，那就要切到 vis-timeline 这类专用库了。
