使用@keyframes定义动画帧，结合transform的translateY和scaleY实现图标弹跳效果。通过设置多个关键帧模拟下落、触地压缩与回弹过程，如0%到40%下落，45%挤压，55%反弹，70%恢复，80%小幅度二次回弹，100%稳定。为增强真实感，加入垂直位移与Y轴缩放变形。将动画绑定至.icon元素，设置animation: bouncy-icon 1s ease-in-out infinite，可控制时长、缓动函数与循环次数。:hover或.active状态可触发非循环动画，调整参数使动作自然流畅。
想让图标实现弹跳动画，可以通过 @keyframes 定义动画帧，并结合 transform 的位移与缩放来模拟真实的弹跳效果。这种方法轻量、兼容性好，适用于按钮图标、加载提示等场景。
定义 @keyframes 动画关键帧
使用 @keyframes 指定动画过程中元素的样式变化。弹跳动画通常从上方下落并反弹几次，逐渐稳定。可以利用 transform: translateY() 控制垂直位移。
例如：
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
这个基础版本实现了上下弹动，但缺乏真实感。为了更贴近物理效果，可增加多个关键帧模拟多次回弹。
@keyframes realistic-bounce { 0% { transform: translateY(-100px); } 40% { transform: translateY(0); } 50% { transform: translateY(-8px); } 60% { transform: translateY(0); } 80% { transform: translateY(-4px); } 100% { transform: translateY(0); } }
应用 transform 增强视觉反馈
真实弹跳中，物体触地时会轻微压缩再恢复。可通过 scaleY 模拟挤压变形，提升动画质感。
立即学习“前端免费学习笔记（深入）”；
@keyframes bouncy-icon { 0% { transform: translateY(-80px) scaleY(1); } 45% { transform: translateY(0) scaleY(0.95); } 55% { transform: translateY(-6px) scaleY(1.05); } 70% { transform: translateY(0) scaleY(1); } 85% { transform: translateY(-2px); } 100% { transform: translateY(0); } }
将动画绑定到图标元素
选中目标图标（如一个带有类名 icon 的 或 i 标签），应用动画属性。
.icon { display: inline-block; animation: bouncy-icon 1s ease-in-out infinite; }
说明：
- animation-name: 对应 @keyframes 定义的名称
- animation-duration: 控制一次动画时长，太短显得急促，太长则迟缓
- animation-timing-function: 使用
ease-in-out或cubic-bezier()更接近重力加速度 - animation-iteration-count: 设为
infinite可循环播放
如果只需要播放一次，比如点击触发，可改为：
.icon:hover, .icon.active { animation: bouncy-icon 0.6s ease-out; }
基本上就这些。合理调整位移幅度、时间和缩放比例，就能做出自然的图标弹跳效果。关键是让 transform 和 keyframes 配合得当，避免生硬跳变。