使用纯 css 实现两个文本（如 “hello!” 和 “how are you?”）在固定间隔内交替显示，模拟打字机效果并自动循环回退，无需 javascript。
使用纯 css 实现两个文本（如 “hello!” 和 “how are you?”）在固定间隔内交替显示，模拟打字机效果并自动循环回退，无需 javascript。
要实现两个文本之间平滑、定时、可循环的“打字机式”切换（即先显示第一句 → 消失 → 显示第二句 → 消失 → 回到第一句），关键在于利用 opacity + animation-delay + @keyframes 控制显隐节奏，而非依赖字符级逐字动画。以下是一个简洁、可靠且完全基于 CSS 的解决方案。
✅ 核心思路
- 将两段文本置于同一容器中，均设为 display: inline-block，默认 opacity: 0；
- 定义一个总时长为 4s 的无限循环动画 switchText：
- 0%–20%（即前 0.8s）：第一段文本 opacity: 1（可见）；
- 25%–100%（即 1s 后至结束）：opacity: 0（不可见）；
- 第二段文本添加 animation-delay: 2s，使其动画相位偏移，从而在第一段淡出后、恰好在第 2s 开始淡入；
- 动画全程线性（linear），确保节奏均匀，视觉上形成「A 显 → A 隐 → B 显 → B 隐 → A 显…」的闭环。
? 完整可运行代码
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Typewriter Toggle</title><style>
.container {
text-align: center;
margin: 2rem auto;
max-width: 600px;
}
.text-animation {
display: inline-block;
opacity: 0;
animation: switchText 4s linear infinite;
font-size: 2.5rem;
line-height: 1.4;
}
@keyframes switchText {
0%, 20% { opacity: 1; }
25%, 100% { opacity: 0; }
}
.text-animation:nth-child(2) {
animation-delay: 2s;
}
/* 可选：增强打字机感（光标效果） */
.text-animation::after {
content: "|";
animation: blink 1s step-end infinite;
margin-left: 0.25em;
}
@keyframes blink {
50% { opacity: 0; }
}
@media (max-width: 600px) {
.text-animation { font-size: 1.8rem; }
}
</style><div class="container">
<h1 class="text-animation">Hello!</h1>
<h1 class="text-animation">How are you?</h1>
</div>
⚠️ 注意事项
- 语义与可访问性：当前方案两段文本同时存在于 DOM 中，屏幕阅读器可能连续朗读。如需提升无障碍体验，建议结合 aria-live="polite" 动态控制，或改用 JS 切换 textContent 并触发 aria-label 更新；
- 动画性能：opacity 是 CSS 合成属性，硬件加速友好，适合高频动画；避免对 height 或 margin 做动画；
- 扩展性提示：若需支持 3+ 文本轮播，可按比例扩展关键帧百分比（如 3s 总周期 × 3 项 = 每项占 33.3%），并依次设置 animation-delay 为 0s, 3s, 6s；
- 字体渲染优化：为防止文字闪烁，建议在 body 或 .container 上添加 transform: translateZ(0) 或 will-change: opacity（慎用，仅在必要时）。
该方案轻量、兼容性强（支持所有现代浏览器及 IE10+），真正实现「声明式交互动画」——你只需写一次 CSS，即可获得精准节拍的文本呼吸感切换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
