如何在CSS中流畅地依次播放多个动画？

嘿，我一眼就看出问题出在哪了——你没设置动画的填充模式，导致第一个动画结束后元素突然跳回初始状态，这才让整个效果显得卡顿！

CSS动画默认的animation-fill-mode是none，意思是动画执行完之后，元素会立刻回到动画开始前的样式。你的zoomIn动画结束时元素是scale(1)，但没加填充模式的话，它会瞬间跳回初始的scale(0)，等1秒延迟后pulse才启动，这中间的跳转就是你觉得不流畅的根源。

而且看你的需求是要保持@keyframes独立，那我们完全不用改关键帧，只需要调整一下animation属性的设置就行，给你修正后的代码：

修正后的CSS #

#circle {
  border-radius: 50%;
  background: red;
  height: 100px;
  width: 100px;
  /* 给zoomIn加上forwards，让它结束后保持scale(1)的状态 */
  animation: zoomIn 1s forwards, pulse 0.5s ease 1s infinite alternate;
}

@keyframes zoomIn {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

@keyframes pulse {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

HTML（无需改动） #

<div id="circle"></div>

几个关键调整说明： #

• 给zoomIn动画添加forwards值，确保动画结束后元素停在scale(1)的状态，不会跳回初始大小。
• 我给pulse加了infinite alternate，这样它会在scale(1)和scale(1.1)之间来回循环，如果你只需要单次脉冲效果，去掉这两个值就行。
• 两个@keyframes完全独立，完全符合你的要求～

内容的提问来源于stack exchange，提问作者Jimmy.D