通过CSS @keyframes定义动画序列，结合transform: scale()和opacity属性，可实现文字缩放与透明度变化的淡入效果。1. 使用@keyframes创建从透明、缩小到完全显示的关键帧；2. 将动画绑定至目标元素，设置0.6秒ease-in-out缓动并保持最终状态；3. 应用display: inline-block确保变换生效。示例中“欢迎来到我的页面”将从中部放大淡入，适用于标题或提示场景，视觉自然醒目。
要实现文字的缩放和透明度变化，可以通过 CSS 的 @keyframes 配合 transform: scale() 和 opacity 属性来完成。这种方式适合做入场、强调或动态提示类动画。
定义关键帧动画 @keyframes
使用 @keyframes 创建一个动画序列，控制元素在不同时间点的缩放和透明度状态。
这个动画从完全透明、缩小到原始大小并完全显示，形成平滑的出现效果。
应用动画到文字元素
将定义好的动画绑定到目标文字上，设置动画时长、缓动函数和播放次数。
立即学习“前端免费学习笔记（深入）”；
- animation：简写属性，包含动画名称、持续时间、速度曲线、是否保持最终状态等。
- ease-in-out：让动画开始和结束更柔和。
- forwards：动画结束后保持最后一帧的样式（避免回退）。
完整示例代码
把上面的部分组合起来：
<style> @keyframes fadeInScale { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } } .animated-text { font-size: 24px; color: #333; animation: fadeInScale 0.6s ease-in-out forwards; display: inline-block; } </style><p class="animated-text">欢迎来到我的页面</p>
页面加载时，文字会从中间放大淡入，视觉效果自然醒目。
基本上就这些，利用 transform 和 opacity 结合关键帧，可以轻松做出流畅的文字动效，适用于标题、按钮提示或加载状态等场景。
