钟摆动画需用@keyframes配合ease-in-out或cubic-bezier模拟正弦运动，transform-origin设为50% 0确保支点在顶部中点，搭配animation-direction:alternate实现自然往复，注意Safari兼容性及响应式角度调整。
用 @keyframes 实现钟摆动画的核心逻辑
钟摆不是匀速摆动，而是近似正弦运动：中间快、两端慢。直接写 transform: rotate() 线性过渡会显得僵硬。必须用 ease-in-out 或自定义贝塞尔曲线模拟加速度变化，否则一眼假。
关键点在于起始角度（比如 -30deg）、中点（0deg）、终点（+30deg）三帧的节奏分配——不能平均切分时间，要让 0deg 占据更短时长，两端停留稍长：
@keyframes pendulum {
0% { transform: rotate(-30deg); }
50% { transform: rotate(0deg); }
100% { transform: rotate(30deg); }
}
然后在元素上应用时，务必加 animation-timing-function: ease-in-out（或 cubic-bezier(0.3, 0.7, 0.7, 0.3)），否则 50% 帧会“卡住”。
transform-origin 设错会导致摆动中心偏移
钟摆支点必须在顶部正中，否则动画会像被风吹歪的吊灯。默认 transform-origin 是元素中心（50% 50%），但钟摆需要的是顶部中点：50% 0。
立即学习“前端免费学习笔记（深入）”；
常见错误是只写 top 或漏掉单位，导致浏览器回退到默认值：
- ✅ 正确：
transform-origin: 50% 0;或transform-origin: center top; - ❌ 错误：
transform-origin: top;（部分浏览器解析为50% 0，但不保证） - ❌ 错误：
transform-origin: 0 0;（支点跑到左上角，整个摆往右下甩）
如果钟摆容器有 padding 或 border，还要确认 box-sizing: border-box，避免 origin 计算偏移。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
用 animation-iteration-count: infinite 实现连续摆动但别忘重置
无限循环本身很简单，但容易忽略两个现实问题：启动突兀、方向反转生硬。
解决方法是把动画周期设为单向（-30deg → +30deg），再用 animation-direction: alternate 让它来回——这样比写 -30→+30→-30 更可控：
.pendulum {
animation: pendulum 2.4s infinite alternate;
animation-timing-function: cubic-bezier(0.3, 0.7, 0.7, 0.3);
}
注意：若钟摆元素含子内容（比如文字或图标），transform 会影响其渲染清晰度。可加 will-change: transform; 提前触发 GPU 加速，但别滥用，尤其在移动端可能引发内存抖动。
响应式钟摆要注意 vw/vmin 单位和缩放兼容性
钟摆幅度（rotate() 角度）本身与尺寸无关，但视觉上小屏幕摆幅太大会显得夸张。建议用媒体查询动态调小角度：
@media (max-width: 480px) {
@keyframes pendulum {
0% { transform: rotate(-15deg); }
50% { transform: rotate(0); }
100% { transform: rotate(15deg); }
}
}
另外，如果父容器用了 scale() 或 CSS 变换，钟摆的 transform 会叠加，造成角度翻倍。此时应把钟摆元素提一层 DOM，或用 transform: none 重置继承变换。
真正麻烦的是 Safari 旧版本对 transform-origin 和 cubic-bezier() 的解析差异——测试时至少覆盖 iOS 14+ 和 macOS Monterey 以上，低于此版本建议降级为线性 + 更小角度保底。
