在CSS项目中添加文字动画，能让页面更具吸引力和现代感。实现基本的文字动画并不复杂，掌握几个关键技巧就能快速上手。下面介绍几种常见且实用的CSS文字动画效果。
1. 文字渐显动画（淡入效果）
让文字从透明逐渐显示出来，适合标题或提示信息的出场动画。
使用 opacity 和 transition 或 @keyframes 实现：- 设置初始状态 opacity: 0
- 通过动画或类切换改为 opacity: 1
- 配合 transition 可实现平滑过渡
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
h1 {
opacity: 0;
animation: fadeIn 1.5s ease-in forwards;
}
2. 文字滑入动画（位移动画）
让文字从一侧滑入视口，增强视觉引导。
利用 transform 移动位置，再恢复到原点：- 初始用 translateX(-20px) 或 translateY(10px) 偏移
- 动画结束时 transform: translateX(0)
- 可结合延迟属性控制多个文字依次出现
@keyframes slideIn {
from {
transform: translateX(-30px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.animated-text {
animation: slideIn 0.8s ease-out forwards;
}
3. 打字机效果（模拟输入）
模仿文字逐个输入的动态效果，常用于展示标语或代码片段。
html5全屏可拖拽的横向图片布局
下载
html5基于TweenMax来制作拖拽图片预览动画特效。拖拽效果使用的是Draggabilly插件。这是一款html5和CSS3可拖拽的横向图片预览布局。该布局将所有图片在屏幕中央进行横向排布，可以通过鼠标前后拖拽图片。当点击图片的标号数字时，隐藏所有的缩略图，在屏幕上显示当前被点击的图片放大，文本内容展示效果。
立即学习“前端免费学习笔记（深入）”；
核心是结合 width 动画与 white-space 控制：- 设置 overflow: hidden 让超出部分隐藏
- 通过动画改变 width，从 0 到 100%
- 使用 monospace 字体更贴近打字感觉
@keyframes type {
to { width: 100%; }
}
.typing {
border-right: 2px solid #000;
width: 0;
white-space: nowrap;
overflow: hidden;
animation: type 3s steps(40) forwards;
}
4. 颜色渐变与背景流动文字
使用渐变色背景并让其“流动”，使文字看起来有光泽变化。
借助 background-clip 和 gradient 实现炫酷效果：- 将背景设为线性渐变
- 用 background-clip: text 让背景只显示在文字上
- 配合 mask 或 -webkit-text-fill-color 实现透明文字显示背景
@keyframes gradientShift {
0%{ background-position: 0% 50%; }
100%{ background-position: 100% 50%; }
}
.gradient-text {
background: linear-gradient(90deg, red, orange, yellow, green);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradientShift 3s ease infinite;
}
基本上就这些。合理运用 opacity、transform、animation 和背景剪裁，就能做出多种自然又吸引人的文字动画。注意控制动画时长和节奏，避免过度干扰用户阅读。 
