答案：通过@keyframes动画可实现字体大小动态变化，如使用font-size渐变或transform:scale()配合opacity制作平滑的文字放大效果。
要实现CSS动画中字体大小的渐变效果，不能直接对 font-size 使用“渐变”（如background: gradient），但可以通过CSS动画（@keyframes）让字体大小在一段时间内平滑变化，达到动态放大的视觉效果。
1. 使用 @keyframes 控制 font-size 变化
通过定义关键帧动画，使元素的字体大小从一个值过渡到另一个值：
@keyframes fontSizeGrow {
0% {
font-size: 16px;
}
50% {
font-size: 24px;
}
100% {
font-size: 20px;
}
}
.animated-text {
animation: fontSizeGrow 3s ease-in-out infinite;
}
上面的例子中，文字会从16px放大到24px，再缩小到20px，循环播放。你可以根据需要调整时间、缓动函数和具体数值。
2. 结合 transform: scale 实现更自然的视觉变化
如果只想让文字“看起来”变大而不影响布局，可以使用 transform: scale()，它不会改变文档流：
立即学习“前端免费学习笔记（深入）”；
@keyframes textScale {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.scale-text {
display: inline-block; / scale 对 inline 元素无效，需设为 inline-block 或 block /
animation: textScale 2s ease-out infinite;
}
这种方式更适合做高亮或提示动画，避免因 font-size 变化导致页面跳动。
3. 配合 opacity 制造淡入放大效果
常用于标题出现动画，结合透明度和字体大小变化：
@keyframes fadeInBig {
0% {
font-size: 12px;
opacity: 0;
}
100% {
font-size: 32px;
opacity: 1;
}
}
.fade-in-text {
animation: fadeInBig 1.5s ease forwards;
}
注意使用 forwards 填充模式，让动画结束后保持最终状态。
基本上就这些方法。根据实际需求选择用 font-size 动画还是 transform 缩放，合理搭配能做出流畅的文字动态效果。
