掌握CSS的@keyframes和transition可轻松实现HTML文本动画。1. 用@keyframes创建淡入效果，文字从透明渐显；2. 利用width扩展与steps()模拟打字机逐字出现；3. 通过:hover添加悬停交互，实现颜色变化与放大；4. 使用多阶段transform制作抖动、波浪等高级效果，但应适度避免干扰阅读。
想让网页上的文字动起来，吸引访客注意？HTML文本动画其实不难实现。通过结合HTML结构与CSS动画，你可以轻松做出淡入、滑动、打字机效果等视觉吸引的动态文字。关键在于使用CSS的@keyframes和过渡（transition）功能，控制文字的样式变化过程。
1. 使用CSS Keyframes创建基础动画
这是最常用的方法。先用HTML写好文字容器，再通过CSS定义动画帧。
示例：让文字从透明到显示（淡入效果）
<p class="fade-in">欢迎来到我的网站</p>
CSS代码：
.fade-in {<br>
opacity: 0;<br>
animation: fadeIn 2s ease-in forwards;<br>
}<br><br>
@keyframes fadeIn {<br>
to { opacity: 1; }<br>
}
说明：文字初始为透明（opacity: 0），通过fadeIn动画在2秒内变为完全可见。
立即学习“前端免费学习笔记（深入）”；
2. 实现打字机动画效果
模拟文字逐个输入的效果，特别适合标题或引言。
HTML：
<p class="typing">这是一段逐字出现的文字</p>
CSS：
.typing {<br>
width: 0;<br>
white-space: nowrap;<br>
overflow: hidden;<br>
border-right: 2px solid #000;<br>
animation: typing 3s steps(30) forwards;<br>
}<br><br>
@keyframes typing {<br>
from { width: 0; }<br>
to { width: 100%; }<br>
}
要点：利用width从0扩展到100%，配合steps()实现逐字出现，white-space: nowrap防止换行。
3. 添加悬停动画增强交互
当用户鼠标移到文字上时触发动画，提升互动感。
示例：文字颜色渐变 + 放大
CSS：
.hover-text {<br>
color: #333;<br>
transition: all 0.3s ease;<br>
}<br><br>
.hover-text:hover {<br>
color: #f00;<br>
transform: scale(1.1);<br>
font-weight: bold;<br>
}
说明：transition让变化更平滑，:hover定义鼠标悬停时的状态。
4. 高级技巧：抖动、闪烁或波浪文字
使用transform和多阶段关键帧可做出更生动的效果。
比如让警告文字轻微抖动：
@keyframes shake {<br>
0%, 100% { transform: translateX(0); }<br>
25% { transform: translateX(-5px); }<br>
75% { transform: translateX(5px); }<br>
}<br><br>
.warning {<br>
animation: shake 0.5s ease infinite;<br>
}
这个效果适合提示类信息，但注意别过度使用，以免干扰阅读。
基本上就这些。只要掌握@keyframes、animation属性和transition，你就能让任何文字动起来。关键是根据页面风格选择合适的动画类型——简洁自然的效果往往比花哨的更有效。不复杂但容易忽略。
