首页 > 文章 > 前端

CSS文字跳动动画实现方法

时间：2025-12-15 18:23:35 361浏览收藏

推广推荐

前往漫画官网入口并下载 ➜

支持 PC / 移动端，安全直达

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《CSS实现文字跳动动画教程》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

定义@keyframes bounce设置transform位移，将animation绑定到文字元素并设为无限循环，通过调整关键帧时间、位移值和缓动函数控制跳动节奏与幅度，实现自然的文字跳动效果。

在css中如何用animation制作文字跳动效果

要使用 CSS 的 animation 制作文字跳动效果，核心是结合 @keyframes 定义动画帧，并通过 transform 属性控制文字的上下位移，模拟“跳动”感。

1. 定义跳动动画的关键帧

使用 @keyframes 创建一个名字如 bounce 的动画，在不同阶段调整元素的垂直位置：

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

这个动画让元素在特定时间点轻微上移再回落，形成弹性跳动效果。

2. 应用动画到文字元素

将定义好的动画绑定到目标文字上，设置持续时间、重复方式等：

.bounce-text {
  display: inline-block;
  font-size: 24px;
  color: #333;
  animation: bounce 0.6s ease infinite;
}

注意：display: inline-block 是必要的，因为 transform 对纯 inline 元素（如默认 span）支持有限。同时设置 infinite 让动画无限循环。

3. 调整节奏与幅度提升真实感

跳动感是否自然取决于关键帧的时间点和位移值：

缩短动画周期（如 0.5s）可实现快速轻快的跳动
增加 translateY 值（如 -15px）会让跳跃更高
配合 ease-out 或 cubic-bezier(.2, .8, .6, 1) 可增强弹跳缓动效果

4. HTML 示例结构

只需简单标签即可：

跳动的文字

基本上就这些。通过控制 keyframes 和 animation 参数，你可以轻松实现各种风格的文字跳动效果，比如心跳式、弹球式或呼吸式跳动。

理论要掌握，实操不能落！以上关于《CSS文字跳动动画实现方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！