在css中如何用animation制作文字跳动效果-css教程-PHP中文网

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

P粉602998670

发布： 2025-10-08 17:24:01

原创

291人浏览过

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

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

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

火山写作

字节跳动推出的中英文AI写作、语法纠错、智能润色工具，是一款集成创作、润色、纠错、改写、翻译等能力的中英文 AI 写作助手。

105

查看详情

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 示例结构

只需简单标签即可：

<span class="bounce-text">跳动的文字</span>

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

以上就是在css中如何用animation制作文字跳动效果的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

css边框颜色border-color设置技巧 CSS动画元素的初始状态如何设置_keyframes from与to技巧 CSS定位元素在不同浏览器中的表现一致吗_兼容性分析与优化 CSS框架Bulma的Flexbox布局如何使用_弹性盒子实践在css中link标签跨域样式引入问题