如何实现网站注册按钮无形变的弹跳动画效果？

当然可以实现无变形的弹跳效果，核心是只通过垂直位移模拟弹跳，用动画速度曲线替代缩放变形来还原弹性感。

原代码的问题在于依赖scale3d模拟弹跳时的挤压/拉伸，导致按钮形变。我们可以去掉所有缩放相关的变换，仅保留垂直方向的位移，同时通过自定义贝塞尔曲线调整动画节奏，让效果更贴近真实弹跳的物理感。

修改后的完整代码 #

@keyframes jump {
  0% { transform: translateY(0); }
  40% { transform: translateY(-30%); }
  100% { transform: translateY(0); }
}
.jump {
  /* 仅保留垂直位移，确保按钮尺寸完全不变 */
  animation: jump 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) alternate infinite;
}

/* For demo: */
body {text-align: center;}
body * {margin: 2em 2em 0; text-align: center; vertical-align: middle; font-family: sans-serif, sans; font-weight: bold; padding: 1em 2em; border: none; border-radius: 4px; background: #2563eb; color: white; cursor: pointer;}

关键细节说明 #

• 移除所有scale3d变换，仅用translateY控制垂直位移，彻底避免按钮形变
• 使用cubic-bezier(0.68, -0.55, 0.265, 1.55)自定义速度曲线：前半段快速向上（模拟起跳加速度），后半段带轻微回弹（模拟落地缓冲），比默认的linear更有真实弹跳感
• 若需要调整弹跳强度或节奏：
  • 修改translateY的百分比数值（比如-40%会让弹跳更高）
  • 调整动画时长（比如0.6s会让动作更柔和）
  • 替换贝塞尔曲线参数（比如cubic-bezier(0.42, 0, 0.58, 1)是更平缓的弹跳曲线）

内容的提问来源于stack exchange，提问作者olmon10