纯html+css可实现猫咪动画，需用transform替代top/left确保gpu加速，border-radius用百分比防变形，hover动画加animation-fill-mode: both防失效，注意safari兼容性。
纯 HTML + CSS 实现猫咪动画完全可行，但必须接受一个前提：所有动态效果都靠 @keyframes 和 animation 驱动，不能依赖 JavaScript 控制状态或响应点击/悬停以外的交互。
为什么用 transform 而不是 top/left 动画耳朵和尾巴
CSS 动画性能差异极大。用 top 或 left 触发 layout + paint，帧率容易掉；而 transform: translate() 或 rotate() 只走合成层，GPU 加速更稳。
- 错误写法：
.ear { animation: wiggle 1.2s infinite; } @keyframes wiggle { from { top: -10px; } to { top: -25px; } } - 正确写法：
.ear { animation: wiggle 1.2s infinite; transform-origin: bottom center; } @keyframes wiggle { from { transform: rotate(-5deg); } to { transform: rotate(8deg); } } - 如果耳朵需要“摆动+轻微上下”，合并写成
transform: rotate(-5deg) translateY(-2px)，别拆成两个属性动画
border-radius 拼猫脸时常见的形状失控问题
猫脸、耳朵、爪子这些非标准几何体，全靠 border-radius 的百分比组合“捏”出来，稍不注意就变形或溢出。
- 用
overflow: hidden包裹父容器（比如.face），否则花纹、瞳孔高光会穿出边界 - 避免写死像素值如
border-radius: 50px 50px 30px 30px—— 宽高一变就崩；优先用相对值：border-radius: 50% 50% 40% 40% / 60% 60% 30% 30% - 耳尖那种“三角形”实际是用
border技巧：width: 0; height: 0; border-bottom: 60px solid #33292b; border-left: 42px solid transparent; border-right: 42px solid transparent;，记得设position: relative并配合transform: rotate()对齐头部角度
鼠标悬停触发动画却只动一次？检查 animation-fill-mode
很多人写 :hover { animation: blink 0.3s; }，结果鼠标划过多次，眼睛只眨一次——因为默认动画结束后会回到初始状态，且不会重播已播放过的实例。
- 加
animation-fill-mode: forwards;让动画停在最后一帧（比如闭眼状态） - 若想每次悬停都重新播放，必须加
animation-play-state: running;并确保元素原本没在播；更稳妥写法：.eye:hover { animation: blink 0.3s both;（both = forwards + backwards） - 警惕级联冲突：如果父容器已有
animation，子元素 hover 动画可能被覆盖，建议用更高优先级选择器或!important（仅调试时）
不同浏览器下动画卡顿或不显示？关键看这三点
CSS 动画兼容性现在很好，但仍有细节影响表现：
- 旧版 Safari（@keyframes 中的
transform: scale3d()，降级用scale() - 部分安卓 WebView 对
animation-timing-function: cubic-bezier(.17,.67,.83,.67)支持不稳定，改用ease-in-out更保险 - 如果整页动画突然卡住，检查是否用了太多
box-shadow或渐变背景——它们在低端设备上开销大，可加will-change: transform;提前提示合成层，但别滥用（每个元素都加反而拖慢）
真正难的不是画出猫，而是让每块耳朵、每根胡须、每节尾巴的动画节奏错开又协调——这得靠反复调 animation-delay 和 animation-duration，没有公式，只有肉眼校准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
