Html 如何使动画不结巴，永远运行？

我有这个动画，它应该永远运行。但是观察到的结果是在重复之间可以观察到一些打嗝，口吃。如何消除口吃的影响

@-webkit关键帧边界闪烁{
从…起
到{
边框颜色：透明
}
50% {
边框颜色：黑色
}
}
@关键帧边界闪烁{
从…起
到{
边框颜色：透明
}
50% {
边框颜色：黑色
}
}
.borderBlink{
边框：1px纯黑；
/*如果您希望最初不显示边框，请添加“边框颜色：透明”*/
}
.borderBlink:悬停{
-webkit动画：borderBlink 1s无限；
动画：1秒无限；
}

---

悬停时边框闪烁

如果您想要更平滑的悬停过渡，我可以建议您在CSS文件中添加以下内容-

过渡计时功能：轻松进出像这样：

.borderBlink {
  border: 1px solid black;
  transition-timing-function: ease-in-out;
  /* add 'border-color: transparent' if you wish no border to show initially */
}

.borderBlink:hover {
  -webkit-animation: borderBlink 1s infinite;
  animation: borderBlink 1s infinite;
}

这将在鼠标悬停和离开时提供平滑的过渡
 这里运转平稳。可能是你电脑上的一些东西，比如后台进程占用了太多的CPU或GPU电源。我也不会口吃。