CSS动画如何实现文字缩放和透明度变化_transform scale opacity @keyframes组合

通过CSS @keyframes定义动画序列，结合transform: scale()和opacity属性，可实现文字缩放与透明度变化的淡入效果。1. 使用@keyframes创建从透明、缩小到完全显示的关键帧；2. 将动画绑定至目标元素，设置0.6秒ease-in-out缓动并保持最终状态；3. 应用display: inline-block确保变换生效。示例中“欢迎来到我的页面”将从中部放大淡入，适用于标题或提示场景，视觉自然醒目。

要实现文字的缩放和透明度变化，可以通过 CSS 的 @keyframes 配合 transform: scale() 和 opacity 属性来完成。这种方式适合做入场、强调或动态提示类动画。

定义关键帧动画 @keyframes

使用 @keyframes 创建一个动画序列，控制元素在不同时间点的缩放和透明度状态。

@keyframes fadeInScale { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } }

这个动画从完全透明、缩小到原始大小并完全显示，形成平滑的出现效果。

应用动画到文字元素

将定义好的动画绑定到目标文字上，设置动画时长、缓动函数和播放次数。

.animated-text { animation: fadeInScale 0.6s ease-in-out forwards; display: inline-block; /* 确保 transform 生效 */ }

• animation：简写属性，包含动画名称、持续时间、速度曲线、是否保持最终状态等。
• ease-in-out：让动画开始和结束更柔和。
• forwards：动画结束后保持最后一帧的样式（避免回退）。

完整示例代码

把上面的部分组合起来：

欢迎来到我的页面

页面加载时，文字会从中间放大淡入，视觉效果自然醒目。

基本上就这些，利用 transform 和 opacity 结合关键帧，可以轻松做出流畅的文字动效，适用于标题、按钮提示或加载状态等场景。