如何为按钮添加无需hover的CSS脉冲动画？

下面是直接可用的代码，页面加载后按钮会自动播放脉冲动画，无需鼠标hover触发：

HTML 代码 #

<button class="pulse-btn">脉冲按钮</button>

CSS 代码 #

/* 定义脉冲动画的关键帧 */
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
  }
}

.pulse-btn {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: #fff;
  /* 应用动画：动画名称 时长 循环次数 缓动方式 */
  animation: pulse 2s infinite ease-in-out;
}

说明 #

• 动画通过@keyframes定义了脉冲的三个阶段：初始正常状态、中间轻微放大并扩散阴影、最后回到初始状态。
• animation属性中的infinite参数让动画无限循环，页面加载后按钮就会自动动起来，不需要任何触发条件。
• 你可以调整2s（动画时长）、scale(1.05)（放大比例）、阴影颜色和大小来修改脉冲效果。

内容的提问来源于stack exchange，提问作者Salah com