H5游戏中小鸟振翅动画用CSS实现：通过@keyframes定义rotate翅膀扇动、scaleY/translateY身体起伏，错峰延迟增强节奏感，多段关键帧+缓动曲线提升真实度，并动态切换飞行/上升/坠落状态。
在 H5 游戏中实现小鸟上下振翅飞翔的循环动画，核心是用 CSS 动画（@keyframes）控制翅膀角度或整体姿态变化，并配合 transform（如 rotate()、scaleY() 或 translateY()）模拟自然振翅节奏。不依赖 Canvas 帧绘制，纯 CSS 就能高效完成。
用 rotate 模拟翅膀扇动（推荐）
给小鸟的翅膀（独立元素或伪元素）设置绕中心点旋转，上下扇动更直观：
- 把翅膀做成
::before/::after伪元素，或单独的<div class="wing"> - 设置
transform-origin: bottom center（以翅膀底部为旋转轴） - 定义关键帧：0% 翅膀下垂（
rotate(15deg)），50% 上扬（rotate(-25deg)），100% 回到下垂 - 应用动画：
animation: flap 0.4s ease-in-out infinite
用 scaleY + translateY 做身体起伏联动
让小鸟本体轻微上下浮动 + 身体微缩放，增强飞翔真实感：
- 关键帧中：0%
transform: translateY(0) scaleY(1)；50%translateY(-4px) scaleY(0.98)；100% 回原位 - 与翅膀动画错开 0.05s 延迟（
animation-delay: -0.05s），形成“先抬翅、再升身”的节奏 - 避免使用
top/left，始终用transform保证 GPU 加速
用多段关键帧细化振翅节奏
基础循环容易显得机械，加入中间停顿和变速可提升表现力：
- 例如：0% → 20%（快速上抬）、20% → 40%（短暂停顿）、40% → 70%（缓慢下压）、70% → 100%（弹性回弹）
- 搭配
cubic-bezier(0.3, 1.2, 0.5, 1)曲线，让下压阶段有缓冲感 - 总时长建议 0.3–0.5s，太快失真，太慢显迟钝
适配不同状态（飞行/坠落/点击上升）
实际游戏中需动态切换动画行为：
- 默认飞行：启用
flap循环动画 - 用户点击/触摸：临时添加
rise动画（translateY(-30px)+scaleY(1.05)），用animation-fill-mode: forwards保持终点状态 - 坠落时：暂停振翅动画，改用
fall（带旋转+加速下移），用 JS 控制element.style.animation = "none"再重设
不复杂但容易忽略：确保小鸟容器设 overflow: hidden 防止翅膀旋转时溢出；所有动画属性统一用 transform 和 opacity，避免触发重排。直接写在 class 里，用 JS 切换 class 名控制状态最稳定。
