如何用纯CSS实现基于计时器的缩放动画？

完全可以用纯CSS搞定这个需求！不用写一行JS，就能实现每5秒自动触发一次、0.5秒完成缩放进出的动画效果。下面是具体实现方案：

核心实现代码 #

/* 按钮基础样式（可根据你的主题自定义） */
.animated-button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

/* 定义缩放动画关键帧 */
@keyframes zoomInOut {
  /* 初始和结束状态：原始大小 */
  0%, 100% {
    transform: scale(1);
  }
  /* 动画中间点：放大状态（0.25秒时达到最大） */
  5% {
    transform: scale(1.1); /* 可根据需求调整缩放比例 */
  }
}

/* 给按钮绑定动画 */
.animated-button {
  /* 动画名称 | 总周期时长 | 循环方式 | 过渡曲线 */
  animation: zoomInOut 5s infinite ease-in-out;
}

代码解释 #

• 关键帧设计：我们把整个5秒的周期拆分成两部分：前0.5秒（对应关键帧的0%到10%）完成缩放进出，剩下的4.5秒保持按钮原始状态。其中5%是动画的峰值点，对应0.25秒时按钮放大到最大，之后再用0.25秒缩回去，刚好匹配你要的0.5秒动画时长。
• 动画属性：
  • 5s：整个动画循环的总时长（0.5秒动画 + 4.5秒等待）；
  • infinite：让动画无限重复；
  • ease-in-out：让缩放的过渡更柔和，避免突兀的大小变化；
  • 你可以修改scale(1.1)里的数值来调整缩放幅度，比如改成1.2就是更大的缩放效果。

额外优化提示 #

如果需要兼顾用户hover体验，可以叠加hover状态的样式：

.animated-button:hover {
  animation: none; /* 暂停自动动画 */
  transform: scale(1.1); /* 保持hover放大状态 */
  transition: transform 0.2s ease; /* hover过渡动画 */
}

这样用户鼠标悬停时，自动动画会暂停，按钮保持放大状态，交互体验更友好。

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