IE11中移除类无法停止关键帧动画问题咨询

这绝对不是你的操作失误，这是IE11的已知渲染bug！我之前也碰到过一模一样的情况，简直头疼。

问题原因 #

IE11在处理带有CSS动画的类移除时，经常会“失忆”——它能正确识别并重置颜色这类简单样式，但对于transform驱动的动画，除非元素有明确的初始状态，否则它不会主动停止动画。而开启开发者工具时，浏览器会强制触发页面重绘/重排，这时候IE11才会重新计算元素的动画状态，所以动画就正常停止了。

解决方法 #

这里有几个经过验证的修复方案，你可以选一个适合你的：

1. 给元素设置初始transform状态（最推荐）

给#banner添加默认的transform值，让IE11明确知道移除类后要回到的初始状态：

#banner {
  /* 初始旋转角度，和动画的0%状态一致 */
  transform: rotate(0deg);
  /* 可选：添加过渡让颜色变化更平滑 */
  transition: background-color 0.3s, color 0.3s;
}

.spin {
  background: #FF0000;
  color: #FFF;
  -webkit-animation: spin 1.5s infinite linear;
  animation: spin 1.5s infinite linear;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

2. 移除类后手动触发重绘

如果不想修改CSS，可以在JavaScript里移除类后，强制让IE11触发重绘：

stopButton.addEventListener("click", function(){
  banner.classList.remove("spin");
  /* 读取offsetWidth会强制浏览器重排，修复IE11的动画bug */
  void banner.offsetWidth;
});

3. 用animation-play-state控制动画（替代移除类）

另一种思路是不移除类，而是通过修改animation-play-state来暂停/播放动画：

.spin {
  background: #FF0000;
  color: #FFF;
  -webkit-animation: spin 1.5s infinite linear;
  animation: spin 1.5s infinite linear;
  /* 默认播放状态 */
  -webkit-animation-play-state: running;
  animation-play-state: running;
}

.spin.paused {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

对应的JavaScript修改：

spinButton.addEventListener("click", function(){
  banner.classList.add("spin");
  banner.classList.remove("paused");
})
stopButton.addEventListener("click", function(){
  banner.classList.add("paused");
})

为什么开开发者工具就正常？ #

当你打开IE11的开发者工具时，浏览器会自动触发页面的重绘和重排操作，这时候它会重新检查所有元素的样式和动画状态，自然就纠正了之前的“失忆”问题。

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