在轻量化前端项目的交互反馈设计中，Lottie 动画虽然开发高效，但在低端移动端、小程序离线场景下存在明显短板：资源体积大、主线程占用高、跨端兼容性差、依赖外部资源文件。
针对本项目卡通角色交互场景，我采用纯 CSS Keyframes 重构全套反馈动画，摒弃所有 Lottie 资源依赖。通过状态化 Class 区分静态、庆祝、微动、休眠多套交互姿态，仅操作 transform 与 opacity 属性触发 GPU 合成层渲染，完全避免页面重排重绘，全程保持 60FPS 稳定渲染。
开发过程中，我对动画时长、振幅、循环节奏做了多轮适配调校，保证交互反馈自然柔和，同时按需启用硬件加速，闲置静态组件关闭动画渲染，合理控制移动端设备资源消耗。
相较于传统动效方案，纯 CSS 动画体积几乎可以忽略，跨端适配零成本，打包后可直接迁移至 Uni-app 编译小程序、移动端离线应用，不存在资源 404、插件缺失、适配报错等常见问题。
对于打卡、备忘录、轻量工具类项目，原生 CSS 动画完全能够满足交互需求，且在性能、兼容性、工程轻量化上全面优于 Lottie，是小项目高性价比的动效方案。