小熊点头动画需将头部单独设为子元素并用transform: rotate()配合@keyframes实现，时长1.2s～1.6s、ease-in-out缓动、旋转±5deg、transform-origin: bottom center；耳朵手臂用transform: translatey()做错相位微浮，clip-path定义耳朵轮廓，伪元素+filter模拟阴影，全程避免重排与非合成属性动画。
用 transform 和 @keyframes 做小熊头部点头动画
纯 CSS 实现小熊动画，核心不是画得像不像，而是让关键部位（头、耳朵、手臂）有节奏地动起来。点头是最容易上手的起点，靠 transform: rotate() 配合 @keyframes 就能完成。
常见错误是直接对整个 .bear 容器加旋转——结果整只熊歪着跑出屏幕。必须把头部单独抽成一个子元素，比如 <div class="bear-head"></div>，再给它加动画。
- 动画时长建议设为
1.2s～1.6s，太快像抽搐，太慢没生气 - 用
ease-in-out缓动，模拟真实肌肉运动惯性 - 旋转角度控制在
-5deg到5deg之间，超过8deg就容易失真 - 别忘了加
transform-origin: bottom center，让旋转轴落在脖子位置，否则会飘
耳朵和手臂用 translateY 做呼吸式浮动
小熊“活着”的感觉，主要来自细微浮动——不是所有部件都要转，耳朵和手臂更适合上下微移，模拟呼吸或放松状态。
这里容易踩坑：用 top/bottom 动画会触发重排（reflow），卡顿明显；必须用 transform: translateY()，走合成层，60fps 才稳。
- 浮动幅度控制在
2px～4px，配合2.5s左右周期，和点头错开相位（比如点头在 0s 启动，耳朵延迟0.3s） - 两个耳朵不要同步动，左耳比右耳快
0.15s，看起来更自然 - 如果手臂也浮动，记得用
transform-origin: top center，避免肘部打滑
用 clip-path 做耳朵轮廓，别硬套 border-radius
初学者常试图用多层 border-radius 拼耳朵，结果边缘生硬、缩放失真。小熊耳朵本质是带弧度的三角形，clip-path: polygon() 更可控。
例如一只右耳可写成：clip-path: polygon(50% 0%, 100% 40%, 70% 100%)。改中间点坐标就能调尖度和外翻感。
-
clip-path在 Safari 旧版需加-webkit-前缀，iOS 15.4+ 可放心用原生 - 别给
clip-path加动画——浏览器不优化，直接卡死。要动就用transform移动整个耳朵元素 - 耳朵阴影不能靠
box-shadow，得用伪元素 +filter: blur(2px)模拟柔和边缘
动画卡顿？先关掉 will-change 和检查重绘区域
很多“零基础教程”一上来就教加 will-change: transform，实际反而引发更多层合成、内存暴涨。现代 Chrome/Firefox 大部分情况下不需要手动干预。
真卡顿，90% 出在隐式重绘：比如给 .bear-eye 的 background-color 做动画，或误用 left/top 移动部件。
- 打开 Chrome DevTools → Rendering → 勾选 “Paint flashing”，看哪些区域疯狂闪红——那就是重绘热点
- 确保所有动画属性只含
transform和opacity - 小熊身体用
background-image时，优先选.svg，别用大尺寸.png，否则缩放时模糊还占内存
真正难的不是让小熊动起来，是让它动得“不机械”——点头和浮动的节奏差、耳朵微倾的角度、甚至阴影扩散速度，这些细节没有固定参数，得盯着预览反复调。留出 20 分钟专门调 timing-function 和 delay，比花两小时堆代码更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
