使用CSS transform: scale配合@keyframes可实现文字缩放动画。1. 定义@keyframes设置0%、50%、100%的scale值，结合animation属性让文字平滑放大缩小循环播放；2. 用:hover触发时可选transition简化操作，复杂节奏仍推荐@keyframes；3. 调整关键帧与缓动函数实现“呼吸”效果，适合标题按钮；4. 注意将文字设为inline-block以支持变换，用transform-origin控制缩放基点，避免大面积频繁动画影响性能，必要时添加-webkit-前缀兼容旧浏览器。
想让文字实现缩放动画效果，可以使用 CSS 的 transform: scale 配合 @keyframes 来完成。这种方式不改变文档流，性能好，适合做平滑的放大缩小动效。
1. 使用 transform scale 和 @keyframes 基本语法
transform: scale() 可以缩放元素尺寸，而 @keyframes 定义动画关键帧，两者结合就能控制文字在不同时间点的缩放状态。
示例代码：
@keyframes zoomText {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.animated-text {
display: inline-block; / 必须设置为可变换的块级或行内块 /
animation: zoomText 2s ease-in-out infinite;
}
这段代码会让文字从正常大小放大到 1.2 倍，再恢复，循环播放。
2. 控制动画触发时机
如果希望鼠标悬停时才缩放，可以用 :hover 触发动画。
立即学习“前端免费学习笔记（深入）”；
示例：悬停放大
@keyframes growOnHover {
to {
transform: scale(1.3);
}
}
.text-hover {
display: inline-block;
transition: transform 0.3s ease;
}
.text-hover:hover {
transform: scale(1.3);
}
这里也可以不用 @keyframes，直接用 transition 更简洁。但如果需要复杂节奏（比如先缩小再弹出），就推荐用 @keyframes。
3. 制作弹性缩放效果（类似“呼吸”动画）
通过调整关键帧的时间点和缓动函数，可以做出更生动的文字呼吸感。
@keyframes breatheText {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.breathe {
display: inline-block;
animation: breatheText 3s ease-in-out infinite;
animation-delay: 0.5s; / 可加延迟错开多个元素 /
}
这种效果适合标题、按钮文字，增加视觉吸引力。
4. 注意事项与优化建议
- 文字元素默认是行内元素，必须设置 display: inline-block 或 block 才能应用 transform 动画。
- 使用 transform-origin 可控制缩放的中心点，例如
transform-origin: center top;让文字从顶部中心展开。 - 避免对大量文字频繁使用复杂动画，可能影响渲染性能。
- 如需兼容旧浏览器，注意 -webkit- 前缀支持。
基本上就这些。掌握 transform scale 与 @keyframes 的配合，就能轻松做出流畅的文字缩放动画，提升页面交互质感。
