首页 > 文章 > 前端

CSS文字跳动效果实现教程

时间：2025-10-08 08:09:28 388浏览收藏

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《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 参数，你可以轻松实现各种风格的文字跳动效果，比如心跳式、弹球式或呼吸式跳动。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。