文字弹跳动画是网页动效中最常见也最能提升活力感的一种效果，无论是落地页的大标题、按钮提示文字，还是加载状态中的提示语，加上一段弹跳动画后整个页面立刻就活了起来。实现这种效果的核心思路其实很简单：利用CSS的animation属性定义动画的关键帧，再通过transform的translateY让文字在垂直方向产生位移，配合缓动函数模拟出物体落地回弹的物理感。本文将从原理到实战，带你完整掌握这一技术。
一、弹跳动画的原理：位移、关键帧与缓动函数
要理解弹跳动画，首先要知道它模拟的是什么。现实中的皮球落地弹起，是一个重力加速下落、接触地面后能量损耗、再以较低高度弹起的过程。在CSS中，我们用transform: translateY()来模拟垂直位移，用@keyframes定义几个关键的位置状态，浏览器会自动补全关键帧之间的过渡过程。
真正决定弹跳手感的是缓动函数animation-timing-function。常见的ease、linear都无法产生真实的回弹感，而cubic-bezier可以自定义贝塞尔曲线来控制速度变化。不过要注意一点：animation-timing-function是作用于每个关键帧之间的区间的，而不是整个动画。也就是说，如果你在0%到100%之间设置了多个关键帧，缓动函数会在每一段上分别生效，这恰恰是实现弹跳的关键技巧。
举个直观的对比：使用ease-in会让文字下落时越来越快，这符合重力效果；而ease-out则是开始快结束慢，适合模拟弹起后的减速。把这两种缓动函数分别应用在下落段和弹起段，就能得到接近真实物理的弹跳效果。
二、基础实现：让整段文字弹跳起来
最简单的方案是让整段文字作为一个整体弹跳。我们定义一个关键帧动画，让元素从原位下落、触底、弹起，再回到原位，配合无限循环就可以持续弹跳。
.bounce-text {
animation: bounce 0.8s ease-in infinite alternate;
}
@keyframes bounce {
from {
transform: translateY(0);
}
to {
transform: translateY(-30px);
}
}
上面这段代码中，infinite alternate表示动画无限循环且每次反向播放，形成上下来回的节奏。但这种方式更像上下浮动，弹跳感不够真实，因为没有加速度和回弹的细节。更真实的写法是利用多段关键帧加cubic-bezier，或者直接使用CSS官方定义好的ease-out配合分段位移：
.bounce-text {
animation: realBounce 1s infinite;
}
@keyframes realBounce {
0%, 100% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0.8, 0, 1, 0.8); /* 下落加速 */
}
50% {
transform: translateY(-40px);
animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); /* 弹起减速 */
}
}
注意animation-timing-function写在关键帧内部时的生效规则：写在0%关键帧中的缓动函数控制的是0%到50%这一段，写在50%中的则控制50%到100%这一段。利用这个特性，下落段用加速曲线、上升段用减速曲线，弹跳的真实感会明显提升。
三、进阶技巧：逐字弹跳与复合动画
整段文字一起弹跳效果不错，但更有设计感的做法是让每个文字依次弹跳，形成波浪式的节奏。实现思路是把文字拆成单个字符，每个字符设置一个递增的animation-delay。手动拆分比较繁琐，可以借助一点JavaScript自动处理：
<p class="wave-text" data-text="BOUNCE!"></p>
<script>
const el = document.querySelector('.wave-text');
el.dataset.text.split('').forEach((char, i) => {
const span = document.createElement('span');
span.textContent = char;
span.style.animationDelay = (i * 0.1) + 's';
el.appendChild(span);
});
</script>
.wave-text span {
display: inline-block;
animation: charBounce 0.6s ease-in-out infinite;
}
@keyframes charBounce {
0%, 100% { transform: translateY(0); }
30% { transform: translateY(-25px) scale(1.1); }
50% { transform: translateY(0); }
60% { transform: translateY(-10px); }
70% { transform: translateY(0); }
}
这里有一个非常关键的细节：span元素必须设置display: inline-block。因为transform对inline元素不生效，这是新手最容易踩的坑之一。另外，上面的关键帧中模拟了两次回弹，第一次弹得高，第二次弹得矮，符合能量逐渐衰减的物理规律，观感会更自然。
还可以在位移的基础上叠加scale缩放，让文字弹到最高点时略微放大，产生挤压拉伸的卡通效果。如果想要更细腻的挤压感，可以在文字落地的瞬间添加scaleY(0.8) scaleX(1.2)的压扁效果，模拟物体撞击地面时的形变。
四、性能优化与常见问题
动画性能方面，transform和opacity是仅有的两个能完全由GPU合成器处理的动画属性，不会触发重排和重绘，因此用translateY做弹跳动画性能极佳。切记不要用top、margin-top这类属性做位移动画，它们会引发频繁的布局计算，在低端设备上会明显卡顿。
几个常见问题需要注意。第一，如果动画结束后文字位置不对，通常是关键帧没有把0%和100%都定义为初始位置，可以加上animation-fill-mode: both来锁定状态。第二，如果弹跳动画影响了页面布局或遮挡了下方元素，可以给父容器预留足够的垂直空间，或者使用overflow: hidden配合固定高度。第三，尊重用户的体验偏好是一个好习惯，可以通过媒体查询在用户开启减少动态效果时关闭动画：
@media (prefers-reduced-motion: reduce) {
.bounce-text, .wave-text span {
animation: none;
}
}
最后补充一个实用技巧：如果不想手写复杂的贝塞尔曲线，animation-timing-function现在支持linear()函数以及一些浏览器提供的弹簧类缓动，配合分段关键帧同样能做出自然的弹跳效果。掌握多段关键帧加分段缓动函数这一核心思路后，无论是文字、图标还是按钮，你都可以套用同样的模式做出丝滑的弹跳动效。
CSS animationtransform translateY文字弹跳动画修改时间：2026-09-02 11:48:40