钟摆动画需用@keyframes配合rotate()模拟弧线运动，起点-15°→中点0°→终点15°→回零，transform-origin设为top center确保支点准确，搭配cubic-bezier(0.3,0.7,0.7,0.3)缓动模拟重力加速度，animation-duration按绳长调整（200px用1.2s，600px用2.0s），并避免left/top动画以保障性能。
用 @keyframes 定义钟摆的弧线运动轨迹
钟摆不是左右平移，而是绕固定点做小角度弧线摆动，视觉上接近正弦曲线。直接用 transform: translateX() 会显得生硬，应该用 rotate() 模拟真实摆动——以悬挂点为原点，让摆锤绕其小幅旋转。
关键点是：动画起点和终点不能都是 0°，否则没有方向感；建议从 -15° → 0° → +15° → 0° 循环，形成自然回弹感：
@keyframes pendulum {
0% { transform: rotate(-15deg); }
25% { transform: rotate(0deg); }
50% { transform: rotate(15deg); }
75% { transform: rotate(0deg); }
100% { transform: rotate(-15deg); }
}
注意：必须给摆锤元素设置 transform-origin: top center（假设悬挂点在顶部正中），否则旋转中心偏移，动画失真。
让动画持续、匀速且无卡顿
CSS 动画默认使用 ease 缓动，但钟摆受重力影响，实际加速度非线性——起始/末端慢、中间快。用 ease-in-out 或自定义贝塞尔曲线更贴切，比如 cubic-bezier(0.3, 0.7, 0.7, 0.3)。
同时要避免常见性能陷阱：
- 别对
left/top动画，强制触发重排；只用transform和opacity - 确保摆锤容器有明确宽高，且不依赖内容流式撑开，否则
transform-origin计算可能漂移 - 添加
will-change: transform可提升 GPU 加速稳定性（仅当动画频繁且复杂时启用）
适配不同长度/周期的钟摆
真实钟摆周期由公式 T ≈ 2π√(L/g) 决定，L 越长，周期越长。CSS 中无法动态计算物理量，但可通过调整 animation-duration 模拟：短摆（如 200px 绳长）用 1.2s，长摆（600px）用 2.0s 左右。
如果需要多个钟摆同步但不同步长，不要共用同一 @keyframes 名称——每个摆独立定义动画名，或用 CSS 自定义属性传参（需配合 JS 动态设置）：
.pendulum--long {
animation-duration: 2s;
}
.pendulum--short {
animation-duration: 1.3s;
}
为什么钟摆动画常“掉帧”或“抖动”
最常见原因是父容器未设 overflow: hidden，导致旋转时摆锤超出边界触发渲染异常；其次是未重置 transform 的其他值（比如之前有 scale 或 translate），叠加后造成意外偏移。
调试时可临时加边框：outline: 1px solid red 查看旋转中心是否对齐悬挂点；用 DevTools 的动画检查器（Animation panel）逐帧拖拽，确认 0% 和 100% 状态是否严格闭合（否则循环跳变）。
真正难的是让多个钟摆保持相位差又不靠 JS 计算——纯 CSS 目前只能靠手动调 animation-delay，精度有限，物理精度要求高时得退回到 Canvas 或 Web Animation API。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
