如何使用CSS实现每秒闪烁2次的文本动画？此前尝试未成功

直接用CSS @keyframes 结合 animation 属性就能实现，以下是具体实现方案：

核心代码实现 #

/* 定义闪烁动画关键帧 */
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* 给目标文本元素绑定动画 */
.blinking-text {
  animation: blink 0.5s infinite;
  /* 0.5秒一个动画周期，刚好对应每秒2次完整闪烁 */
}

完整可运行示例 #

<!DOCTYPE html>
<html>
<head>
  <style>
    @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }
    .blinking-text {
      font-size: 24px;
      animation: blink 0.5s infinite;
    }
  </style>
</head>
<body>
  <p class="blinking-text">这是每秒闪烁2次的文本</p>
</body>
</html>

常见失败原因排查 #

• 周期计算错误：要实现每秒2次闪烁，动画周期必须设为0.5s（1秒÷2次=0.5秒/周期），设成1秒会变成每秒1次闪烁。
• 关键帧不完整：比如只定义了0%和50%的状态，缺失100%会导致动画过渡逻辑断裂。
• 未加循环属性：默认动画仅执行一次，必须添加infinite才能持续闪烁。
• 样式冲突：检查目标元素是否被其他CSS规则覆盖了opacity属性值。

内容的提问来源于stack exchange，提问作者Ankesh Kumar Singh