使用animation可实现文字缩放，通过@keyframes定义font-size变化或transform:scale实现视觉缩放，后者性能更优且不引发布局重排，推荐用于短时动效，同时需考虑可访问性与兼容性。

在css中，animation 可以用来实现 font-size 的动态变化，也就是让文字大小随时间缩放。这种效果常用于强调标题、加载提示或交互反馈。

使用 @keyframes 控制字体缩放

要通过 animation 改变 font-size，需要先定义一个 @keyframes 动画，指定字体大小在不同阶段的值。

例如：

 @keyframes scaleText {   0% {     font-size: 16px;   }   50% {     font-size: 24px;   }   100% {     font-size: 16px;   } } <p>.animated-text { animation: scaleText 2s ease-in-out infinite; } 

这段代码会让元素的文字从 16px 放大到 24px 再缩回，每 2 秒循环一次。

结合 transform 实现更自然的视觉缩放

直接改变 font-size 会引发布局重排（reflow），可能影响页面性能或其他元素的位置。如果只是视觉上的放大缩小，推荐使用 transform: scale()。

立即学习“前端免费学习笔记（深入）”；

百度文心百中

百度大模型语义搜索体验中心

22

查看详情

示例：

 @keyframes growText {   0% {     transform: scale(1);   }   50% {     transform: scale(1.2);   }   100% {     transform: scale(1);   } } <p>.smooth-text { display: inline-block; /<em> 注意：transform 对 inline 元素无效，需设为 inline-block 或 block </em>/ animation: growText 1.5s ease-out infinite; } 

这种方式只触发重绘（repaint），不会影响布局，动画更流畅。

注意事项与兼容性

使用 animation 缩放文字时，注意以下几点：

• font-size 动画适用于需要真实字号变化的场景，比如响应式文本过渡。
• transform: scale 更适合短时间的视觉动效，避免影响可读性和布局稳定性。
• 确保动画不会导致文字溢出容器或遮挡其他内容。
• 对可访问性敏感的用户可能关闭动画（通过 prefers-reduced-motion），建议添加判断：

 @media (prefers-reduced-motion: reduce) {   .animated-text {     animation: none;   } } 

基本上就这些。根据实际需求选择 font-size 还是 transform 来实现文字缩放，兼顾效果与性能。

以上就是在