要调整html文本飞入方向，1. 修改.fly-in-text的初始left值和@keyframes中from与to的left值；2. 也可使用right或bottom属性配合相应动画设置。例如从右侧飞入时，将left改为right并设置为-100%，动画从right:-100%到right:0；从底部飞入则用bottom属性。实现多个文本依次飞入需3. 使用animation-delay属性，并通过:nth-child()选择器为每个元素设置不同延迟时间。让文本飞入后停顿再消失则4. 在@keyframes中划分阶段控制飞入、保持、消失过程，并结合animation-fill-mode:forwards保持最终状态。
设置HTML文本飞入效果，核心在于使用CSS的transform属性和animation动画，通过位移将文本从屏幕外移动到目标位置。
<!DOCTYPE html>
<html>
<head>
<title>文本飞入效果</title>
<style>
.fly-in-text {
position: relative; /* 确保动画基于元素自身位置 */
left: -100%; /* 初始位置：屏幕左侧外部 */
animation: flyIn 1s forwards; /* 动画名称、时长、动画方向 */
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏超出容器的内容 */
}
@keyframes flyIn {
from {
left: -100%; /* 初始位置：屏幕左侧外部 */
opacity: 0; /* 初始透明度 */
}
to {
left: 0; /* 最终位置：元素正常位置 */
opacity: 1; /* 最终透明度 */
}
}
</style>
</head>
<body>
<div class="fly-in-text">这是一段会飞入的文本。</div>
</body>
</html>如何调整飞入方向？
调整飞入方向，只需要修改.fly-in-text的初始left值和@keyframes flyIn中from和to的left值。例如，要让文本从右侧飞入，可以将.fly-in-text的left设置为100%，@keyframes flyIn的from的left设置为100%，to的left设置为0。 也可以使用right属性来实现，但需要注意元素本身的定位方式。
.fly-in-text {
position: relative;
right: -100%; /* 从右侧飞入 */
animation: flyInRight 1s forwards;
white-space: nowrap;
overflow: hidden;
}
@keyframes flyInRight {
from {
right: -100%;
opacity: 0;
}
to {
right: 0;
opacity: 1;
}
}或者，如果你想让文本从底部飞入，可以使用top或bottom属性：
立即学习“前端免费学习笔记（深入）”；
.fly-in-text {
position: relative;
bottom: -100%; /* 从底部飞入 */
animation: flyInBottom 1s forwards;
white-space: nowrap;
overflow: hidden;
}
@keyframes flyInBottom {
from {
bottom: -100%;
opacity: 0;
}
to {
bottom: 0;
opacity: 1;
}
}如何实现多个文本依次飞入的效果？
要实现多个文本依次飞入的效果，可以使用CSS的animation-delay属性。为每个文本元素设置不同的延迟时间，就可以让它们按照顺序依次出现。
<!DOCTYPE html>
<html>
<head>
<title>依次飞入的文本效果</title>
<style>
.fly-in-text {
position: relative;
left: -100%;
animation: flyIn 1s forwards;
white-space: nowrap;
overflow: hidden;
}
.fly-in-text:nth-child(1) {
animation-delay: 0s;
}
.fly-in-text:nth-child(2) {
animation-delay: 0.5s;
}
.fly-in-text:nth-child(3) {
animation-delay: 1s;
}
@keyframes flyIn {
from {
left: -100%;
opacity: 0;
}
to {
left: 0;
opacity: 1;
}
}
</style>
</head>
<body>
<div class="fly-in-text">文本 1</div>
<div class="fly-in-text">文本 2</div>
<div class="fly-in-text">文本 3</div>
</body>
</html>注意，这里使用了:nth-child()选择器来为每个文本元素设置不同的animation-delay。你可以根据需要调整延迟时间。
如何让文本飞入后停顿一段时间再消失？
可以通过修改@keyframes规则和添加animation-fill-mode属性来实现。animation-fill-mode: forwards; 保证动画结束后，元素保持动画的最终状态。
.fly-in-text {
position: relative;
left: -100%;
animation: flyInAndOut 3s forwards; /* 动画总时长3秒 */
white-space: nowrap;
overflow: hidden;
}
@keyframes flyInAndOut {
0% {
left: -100%;
opacity: 0;
}
33% { /* 动画前1秒飞入 */
left: 0;
opacity: 1;
}
66% { /* 动画中间1秒保持 */
left: 0;
opacity: 1;
}
100% { /* 动画最后1秒消失并回到初始位置 */
left: 100%; /* 或者设置 opacity: 0; 来实现淡出效果 */
opacity: 0;
}
}在这个例子中，动画总时长为3秒。前1秒文本飞入，中间1秒文本保持在屏幕上，最后1秒文本消失并飞出屏幕。 可以通过调整@keyframes中的百分比来控制每个阶段的时长。如果想要淡出效果，可以将最后一个关键帧的left属性保持不变，只修改opacity属性为0。
