使用 transform: scale 配合 transition 可实现平滑文字缩放动画。1. 设置 display: inline-block；2. 添加 transition 控制时长与缓动；3. 通过 hover 等状态触发 scale 变化；4. 利用 transform-origin 调整缩放基点；5. 使用 @keyframes 实现自动呼吸效果，避免布局抖动且提升性能。
要实现文字的缩放动画，可以使用 CSS 的 transform: scale 结合 transition 属性，让字体大小的变化过程变得平滑自然。虽然不能直接对 font-size 使用 scale，但通过 transform 可以轻松控制元素的整体缩放效果。
基本原理：scale 与 transition 配合
transform: scale() 用于缩放元素的尺寸，值大于 1 放大，小于 1 缩小。transition 控制变化过程的时间和缓动效果，两者结合即可实现动画。
常见用法示例：
- 鼠标悬停时文字放大
- 点击后文字缩小并恢复
- 页面加载时自动缩放动画
实现步骤
以下是一个简单的文字放大动画实现方式：
立即学习“前端免费学习笔记（深入）”；
.text-scale {
display: inline-block;
font-size: 20px;
transition: transform 0.3s ease;
}
.text-scale:hover {
transform: scale(1.2);
}<span class="text-scale">悬停放大文字</span>
关键点说明：
-
display: inline-block或block是必须的，因为transform对纯inline元素支持有限 -
transition: transform 0.3s ease表示只对缩放变换应用 0.3 秒的过渡效果 -
ease让动画先快后慢，也可替换为linear、ease-in等
避免布局抖动
使用 scale 不会改变文档流，因此不会引起周围元素的位置变化，适合做视觉动画。但如果需要配合 font-size 动画，建议统一使用 transform: scale 来保持性能和稳定性。
进阶技巧：
- 添加
transform-origin控制缩放的基准点（如居中、左上角） - 结合
hover、focus、active实现多种交互状态 - 使用
@keyframes做自动播放的缩放动画
完整示例：呼吸式缩放动画
```css .breathing-text { display: inline-block; font-size: 24px; transition: transform 0.4s ease; }.breathing-text:hover { transform: scale(1.3); }
/ 自动动画版本 / .pulse-text { animation: pulse 1.5s infinite ease-in-out; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
基本上就这些。利用 <code>transform: scale</code> 和 <code>transition</code>，你可以轻松做出流畅的文字缩放效果，同时保持良好的渲染性能。
