使用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;
}
}
.animated-text {
animation: scaleText 2s ease-in-out infinite;
}
这段代码会让元素的文字从 16px 放大到 24px 再缩回，每 2 秒循环一次。
结合 transform 实现更自然的视觉缩放
直接改变 font-size 会引发布局重排（reflow），可能影响页面性能或其他元素的位置。如果只是视觉上的放大缩小，推荐使用 transform: scale()。
立即学习“前端免费学习笔记（深入）”；
示例：
@keyframes growText {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.smooth-text {
display: inline-block; / 注意：transform 对 inline 元素无效，需设为 inline-block 或 block /
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 来实现文字缩放，兼顾效果与性能。
