使用纯 CSS 实现两个文本在固定时间间隔内交替显示的“打字机式”轮播效果，无需 JavaScript，通过 @keyframes 控制透明度与动画时序，精准完成 2 秒显示、2 秒切换、循环往复。
css 实现打字机效果的双向文本轮播（自动切换与回退）
在网页设计中，常需用简洁方式呈现动态文案切换，例如欢迎语与问候语的交替展示。本文介绍一种纯 CSS 解决方案，实现两个文本（如 "Hello!" 和 "How are you?"）以打字机风格轮流出现：每个文本显示 2 秒 → 淡出 → 另一文本淡入 → 显示 2 秒 → 再次切换，无限循环。
核心思路是：
✅ 利用 opacity 动画模拟“逐字显现”的视觉错觉（实际为整体渐显，但结合时序可营造打字感）；
✅ 通过 animation-delay 错开两个元素的动画起始时间；
✅ 使用 animation-duration: 4s 配合关键帧比例，精确控制各阶段停留时长。
以下是完整可运行代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typewriter Effect - Bidirectional Swap</title>
<style>
.container {
text-align: center;
margin: 2rem auto;
max-width: 600px;
}
.text-animation {
display: inline-block;
opacity: 0;
font-size: 2.5rem;
font-weight: bold;
color: #333;
/* 关键：4秒总周期，无限循环，线性过渡 */
animation: switchText 4s linear infinite;
}
@keyframes switchText {
/* 0%–20%（0–0.8s）：当前元素从透明到完全可见 → 模拟“打出”过程 */
0%, 20% {
opacity: 1;
}
/* 25%–100%（1s–4s）：快速淡出并保持隐藏，留白期由另一元素填充 */
25%, 100% {
opacity: 0;
}
}
/* 第二个文本延迟2秒启动，使其在第一个文本淡出后开始“出现” */
.text-animation:nth-child(2) {
animation-delay: 2s;
}
/* 响应式优化（可选） */
@media (max-width: 600px) {
.text-animation {
font-size: 1.8rem;
}
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-animation">Hello!</h1>
<h1 class="text-animation">How are you?</h1>
</div>
</body>
</html>? 关键细节说明：
- .text-animation:nth-child(2) 的 animation-delay: 2s 确保第二条文案在第一条显示 2 秒后才开始其 switchText 动画，从而形成无缝衔接；
- @keyframes 中 0%–20% 对应 0.8 秒渐显（增强“打字”节奏感），25% 起立即归零透明度，避免重叠；
- 若需更逼真的逐字打字效果（非整体淡入），需配合 ch 单位 + width 动画或 JavaScript；但本方案在简洁性、性能与视觉节奏间取得最佳平衡。
? 扩展提示：
立即学习“前端免费学习笔记（深入）”；
- 增加更多文案？只需复制 <h1 class="text-animation">...</h1> 并依次设置 animation-delay: 4s, 6s 等，同时将 animation-duration 改为 2n 秒（n 为文案数）；
- 想加入打字音效或光标闪烁？可额外叠加伪元素 ::after 实现竖线光标，并用 animation 单独控制。
该方法零依赖、高兼容（支持所有现代浏览器），适合轻量级营销页、登录页或作品集首屏动态标题。
