如何实现HTML按钮初始延迟后周期性循环执行旋转动画

你可以通过把单次旋转周期和静置周期整合为一个完整的动画循环实现需求，无需JS，纯CSS即可兼容所有主流浏览器，修改后的代码如下：

#register_event {
  /* 总动画周期7s = 2s旋转 + 5s静置，首次启动延迟5s，永久循环 */
  animation: autoRotateCycle 7s 5s infinite linear;
  transform: rotateZ(0deg);
}

@keyframes autoRotateCycle {
  /* 前28.57%时长对应2s，完成5次400ms/圈的旋转，严格固定单圈速度 */
  0% { transform: rotateZ(0deg); }
  2.857% { transform: rotateZ(-10deg); }
  5.714% { transform: rotateZ(10deg); }
  8.571% { transform: rotateZ(-10deg); }
  11.428% { transform: rotateZ(10deg); }
  14.285% { transform: rotateZ(-10deg); }
  17.142% { transform: rotateZ(10deg); }
  20% { transform: rotateZ(-10deg); }
  22.857% { transform: rotateZ(10deg); }
  25.714% { transform: rotateZ(-10deg); }
  /* 剩余71.43%时长对应5s，保持静止状态 */
  28.571%, 100% { transform: rotateZ(0deg); }
}

效果匹配说明 #

• 首次延迟：通过animation-delay属性设置为5s，满足首次启动延迟要求
• 循环逻辑：总动画时长设为7s，刚好对应2s旋转+5s静置的周期，配合infinite属性实现永久循环
• 单圈速度：单圈动画400ms的要求完全保留，2s内连续播放5次单圈动画，未修改单圈的速度曲线和时长

内容的提问来源于stack exchange，提问作者חיים חדד