如何使用CSS实现文字大小变化动画_animation font-size实践

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何使用CSS实现文字大小变化动画_animation font-size实践

2025-11-21

浏览次数：次

返回列表

答案：通过CSS的@keyframes定义字体大小变化的关键帧动画，再利用animation属性将其应用到文本元素上，可实现文字缩放效果。示例中定义了从16px放大至24px再还原的动画，持续2秒并无限循环。通过animation-timing-function控制缓动效果，还可设置animation-play-state实现悬停触发动画。为提升性能，建议使用transform: scale()替代font-size变化。

如何使用css实现文字大小变化动画_animation font-size实践

实现文字大小变化的动画效果，可以通过CSS animation 和 @keyframes 来完成。这种方式不需要J*aScript，性能好且易于控制。下面介绍具体实现方法。

1. 基本语法：使用 @keyframes 定义动画

要让文字动态改变字号，先用 @keyframes 定义一个关键帧动画，指定字体大小从多少变到多少。

@keyframes 支持多个阶段，比如从初始大小放大，再缩小回来。

示例：

@keyframes fontSizeChange {
  0% {
    font-size: 16px;
  }
  50% {
    font-size: 24px;
  }
  100% {
    font-size: 16px;
  }
}

2. 应用 animation 到文本元素

定义好动画后，将其应用到需要动画的文字上，比如一个或标签。

常用属性包括：animation-name（动画名称）、animation-duration（持续时间）、animation-timing-function（缓动函数）、animation-iteration-count（重复次数）等。

示例：

.animated-text {
  animation-name: fontSizeChange;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; /* 循环播放 */
}

3. HTML结构配合使用

将上述类名添加到需要动画的文本标签中即可生效。

Waifulabs

一键生成动漫二次元头像和插图

317 查看详情 Waifulabs

<p class="animated-text">这段文字会不断缩放</p>

浏览器加载后，该段文字就会按照定义的动画规则循环放大缩小。

4. 可选优化：控制动画启停与触发时机

如果不想自动播放，可以设置 animation-play-state: paused，然后通过:hover或J*aScript触发。

例如鼠标悬停时开始动画：

.animated-text {
  animation: fontSizeChange 2s ease-in-out infinite;
  animation-play-state: paused;
}
<p>.animated-text:hover {
animation-play-state: running;
}