如何通过纯CSS实现动画延迟结束前隐藏元素？

核心思路 #

直接给目标元素设置初始透明状态，配合调整后的动画关键帧，即可实现延迟期间隐藏、延迟结束后开始闪烁的效果，无需额外JS或重复定义关键帧。

完整代码示例 #

/* 定义通用闪烁动画 */
@keyframes twinkle {
  0%, 10%, 12%, 100% { opacity: 0; }
  11% { opacity: 1; }
}

/* 星星元素基础样式 */
.star {
  opacity: 0; /* 初始隐藏，覆盖默认可见状态 */
  animation: twinkle 2s infinite; /* 2s为单次循环时长，可按需调整 */
}

/* 为不同星星设置差异化延迟 */
.star-1 { animation-delay: 0s; }
.star-2 { animation-delay: 0.5s; }
.star-3 { animation-delay: 1s; }
.star-4 { animation-delay: 1.5s; }

进阶优化（批量设置延迟） #

如果星星数量较多，可以用CSS变量结合:nth-child批量定义延迟，减少重复代码：

.star {
  opacity: 0;
  animation: twinkle 2s infinite;
  --delay-offset: 0.5s; /* 每个星星的延迟间隔 */
  animation-delay: calc(var(--delay-offset) * (var(--index) - 1));
}

.star:nth-child(1) { --index: 1; }
.star:nth-child(2) { --index: 2; }
.star:nth-child(3) { --index: 3; }
.star:nth-child(4) { --index: 4; }

方案对比 #

• JS方案：可行但冗余，纯CSS即可满足需求，无需引入脚本逻辑
• 独立@keyframes方案：完全没必要，会产生大量重复代码，维护成本高，通用动画+初始透明的方式更简洁高效

内容的提问来源于stack exchange，提问作者DA2.