如何阻止CSS动画在Transition触发后重启？

嘿，我来帮你拆解下这个问题：

你遇到的动画重启问题，根源在于hover状态下你覆盖了整个animation属性。当你给.insite-handle:hover设置animation: step-end;时，相当于完全替换了初始的动画规则。等鼠标移开，hover状态消失，浏览器会重新应用.insite-handle的原始动画样式——它会把这当成一个全新的动画触发，自然就会再次播放那两次抖动。

纯CSS解决方案 #

我们不需要替换整个动画属性，而是用animation-play-state来暂停动画，同时保留初始的动画配置。这样当hover结束后，动画不会被重新触发（因为它已经完成了设定的2次迭代）。

修改后的完整CSS代码如下：

.insite-draggable { z-index: 10; position: fixed; left: 45px; bottom: 12px; }
.insite-handle { 
  position: absolute; 
  left: -14px; 
  bottom: 13px; 
  transition: left 0.3s cubic-bezier(0.32, 1.85, 0.43, 0.43); 
  /* 合并动画为简写形式，更清晰 */
  animation: bounce 2s 2s 2; 
}
.insite-handle:before { 
  content: "\f100"; 
  font-family: "Font Awesome 5 Free"; 
  font-style: normal; 
  font-size: 16px; 
  line-height: 16px; 
  display: inline-block; 
  background-color: #1ea2b1; 
  cursor: move; 
  color: #ffffff; 
  height: 16px; 
  width: 26px; 
  padding: 3px 3px 3px 4px; 
  border-radius: 7px 0px 0px 7px; 
  border: 1px solid #1a8e9b; 
  transition: padding-left 0.3s cubic-bezier(0.32, 1.85, 0.43, 0.43); 
}
.insite-handle:hover { 
  left: -27px; 
  /* 替换原来的animation: step-end; 为暂停动画 */
  animation-play-state: paused; 
  &:before { 
    content: "\f0b2"; 
    padding-left: 5px; 
  } 
}
@keyframes bounce { 
  0% { left: -14px; } 
  10% { left: -20px; } 
  20% { left: -14px; } 
  30% { left: -20px; } 
  40% { left: -14px; } 
  100% {left: -14px; } 
}
.insite-btn { 
  display: block; 
  position: relative; 
  top: auto; 
  left: auto; 
  bottom: auto; 
  right: auto; 
  font-family: 'BrixSansBold'; 
  font-style: italic; 
  font-size: 0.875rem; 
  line-height: 1rem; 
  border-radius: 5px; 
  background-clip: padding-box; 
  color: #b00402; 
  border: none; 
  margin: 10px 10px 10px auto; 
  padding: 7px 10px 7px 34px; 
  text-decoration: none; 
  text-transform: none; 
  box-shadow: #333333 1px 1px 10px; 
  background-color: #e3e000; 
}

关键修改点说明 #

• 我把初始的动画属性合并成了简写形式animation: bounce 2s 2s 2;，顺序是：动画名称、时长、延迟、播放次数，这样代码更简洁易读。
• 用animation-play-state: paused;替代了原来的animation: step-end;——hover时只是暂停当前动画，而不是替换整个动画规则。当鼠标移开后，动画的播放状态回到running，但因为已经完成了设定的2次迭代，所以不会再次播放。
• 整个方案完全用纯CSS实现，不需要任何JavaScript代码。

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