cssbanner文字需要依次出现如何实现_利用delay与keyframes实现顺序入场-css教程-PHP中文网

cssbanner文字需要依次出现如何实现_利用delay与keyframes实现顺序入场

P粉602998670

发布： 2025-12-15 15:13:50

原创

123人浏览过

CSS实现文字依次出现的核心是为每个span设置递增的animation-delay并配合统一@keyframes动画，需加forwards保持终态，注意时长与延迟协调及无障碍适配。

cssbanner文字需要依次出现如何实现_利用delay与keyframes实现顺序入场

用 CSS 实现 banner 中文字“依次出现”，核心思路是：给每个文字（或词）单独设置 animation-delay，配合同一个 @keyframes 动画控制透明度/位移等入场效果。关键在于“延迟错开”，而非逐个写不同动画。

1. 结构准备：每个字独立包裹

避免用一整段文字直接动画（无法分字控制），推荐将每个字或关键词用 span 包裹：

2. 定义统一入场动画

用 @keyframes 定义一个简洁的淡入+微上浮效果（也可加 scale 或 translateX）：

@keyframes fadeInUp {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}

3. 批量设置 delay 实现顺序触发

给每个 span 设置递增的 animation-delay，例如每字间隔 0.2s：

Kreado AI

Kreado AI是一个多语言AI视频创作平台，只需输入文本或关键词，即可创作真实/虚拟人物的多语言口播视频。为创作者提供AI赋能

182

查看详情

立即学习“前端免费学习笔记（深入）”；

.banner span {
animation: fadeInUp 0.5s ease-out forwards;
}
.banner span:nth-child(1) { animation-delay: 0s; }
.banner span:nth-child(2) { animation-delay: 0.2s; }
.banner span:nth-child(3) { animation-delay: 0.4s; }
.banner span:nth-child(4) { animation-delay: 0.6s; }

✅ 小技巧：若字数多，可用 CSS 自定义属性 + calc 简化（现代浏览器支持）：

.banner span {
--i: attr(data-index); /* HTML 中加 data-index="0" "1" ... */
animation-delay: calc(var(--i) * 0.2s);
}