CSS3 动画在 IE11 中不起作用，但在其他浏览器中起作用

Posted 2023-03-06

【中文标题】CSS3 动画在 IE11 中不起作用，但在其他浏览器中起作用

【英文标题】：CSS3 animation is not working in IE11 but works in other browsers

【发布时间】：2016-04-20 22:58:02

【问题描述】：

我在一个按钮上创建了一个 CSS3 动画。目前，除了 IE，它在任何地方都能完美运行。我知道它在较旧的 IE 版本中无法正常运行，但我至少希望它在 IE11 中运行。

我创建了一个小提琴来演示Fiddle

我像这样调用:before 和:after 上的动画

animation: 1000ms ease 0s normal none infinite running pulse-long;

如果您在 Firefox 或 Chrome 中打开 fiddle，您应该会看到按钮上的动画正在工作。如果在 IE11 中打开，它只是一个静态点。我已经上网尝试了一些方法，例如将动画帧移到CSS文件的顶部，但还是不行。

有没有办法让这个动画在 IE11 中运行？

【问题讨论】：

根据can I use，您的代码应该可以在IE 11中运行，但是在测试时，我也只能看到静态点。

跟我想的完全一样。它应该在 IE11 中工作，但由于某种原因它不能。它适用于其他任何地方，典型的 IE :-)

【参考方案1】：

有两件事阻止动画在 IE11 中工作，它们如下：

IE11在速记中设置animation-play-state为running时总是有问题。没有理由这样做，它可能应该被视为一个错误。解决此问题的方法应该是从速记中删除 running。这不会造成任何伤害，因为animation-play-state 的默认值为running。 父按钮容器的尺寸仅为 10px x 10px，而伪元素最终在动画期间获得 60px x 60px 的尺寸。虽然其他浏览器默认显示溢出，但 IE11 似乎正在裁剪它。这需要与规范进行交叉检查，以确定它是错误还是定义松散的东西。 溢出问题的修复也很简单。只需为按钮容器 (.btnPulse.inactive) 添加一个overflow: visible。这也不会在其他浏览器中造成任何问题，因为它们默认情况下都会这样做。

显示溢出问题的片段：

在下面的 sn-p 中，我避免了动画，只是在伪元素中添加了几个默认的 box-shadow，这样整个东西看起来就像 4 个带有红色圆圈的同心圆（由按钮生成元素）在中间，然后是一个白色圆圈（空白），然后是一个蓝色圆圈（由:before元素的框阴影产生），然后是一个绿色圆圈（由:after元素的框阴影产生）。

在 Chrome、Firefox 和 Opera 中，同心圆将完全可见，但 IE11 将仅显示中心红色圆圈，因为其余部分在父级区域之外。

.btnPulse.inactive.throb::before 
  box-shadow: 0 0 0 16px blue inset;
  display: block;
  height: 60px;
  left: -22px;
  margin: 0 auto;
  right: 0;
  top: 50%;
  transform: translate3d(-3px, -50%, 0px);
  width: 60px;

.btnPulse.inactive::before 
  border-radius: 100%;
  bottom: -5px;
  box-shadow: 0 0 0 1px red inset;
  content: "";
  display: block;
  height: 30px;
  left: -10px;
  margin: 0 auto;
  position: absolute;
  right: -5px;
  top: -5px;
  transition: all 300ms ease-in-out 0s;
  width: 30px;

.btnPulse.inactive.throb::after 
  border-radius: 100%;
  bottom: -5px;
  box-shadow: 0 0 0 8px green inset;
  content: "";
  display: block;
  height: 60px;
  left: -22px;
  margin: 0 auto;
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translate3d(-2px, -50%, 0px);
  transition: all 300ms ease-in-out 0s;
  width: 60px;

.btnPulse.inactive 
  background: red none repeat scroll 0 0;
  border: medium none;
  border-radius: 100%;
  height: 10px;
  outline: medium none;
  padding: 0;
  position: relative;
  width: 10px;

.btnPulse 
  border-radius: 50%;
  cursor: pointer;
  height: 15px;
  padding: 0;
  transition: all 300ms ease-in-out 0s;
  width: 15px;

.btn 
  -moz-user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857;
  margin-bottom: 0;
  padding: 6px 12px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;

#button-container 
  position: absolute;
  left: 100px;
  top: 100px;

<div id="button-container">
  <button class="btn btnPulse inactive throb"></button>
</div>

---

带有修复的工作片段：

下面的 sn-p 应用了上述两个修复程序，它适用于 IE11、Chrome、Firefox 和 Opera。

@keyframes pulse-short 
  100% 
    box-shadow: inset 0 0 0 80px red;
    -moz-box-shadow: inset 0 0 0 80px red;
    -webkit-box-shadow: inset 0 0 0 80px red;
    height: 60px;
    width: 60px;
    left: -22px;
    opacity: 0;
  

@keyframes pulse-long 
  100% 
    box-shadow: inset 0 0 0 10px red;
    -moz-box-shadow: inset 0 0 0 10px red;
    -webkit-box-shadow: inset 0 0 0 10px red;
    height: 60px;
    width: 60px;
    left: -22px;
    opacity: 0;
  

.btnPulse.inactive.throb::before 
  animation: 1000ms ease 0s normal none infinite pulse-long;
  box-shadow: 0 0 0 0 red inset;
  display: block;
  height: 100%;
  left: 3px;
  margin: 0 auto;
  right: 0;
  top: 50%;
  transform: translate3d(-3px, -50%, 0px);
  width: 100%;

.btnPulse.inactive::before 
  border-radius: 100%;
  bottom: -5px;
  box-shadow: 0 0 0 1px red inset;
  content: "";
  display: block;
  height: 30px;
  left: -10px;
  margin: 0 auto;
  position: absolute;
  right: -5px;
  top: -5px;
  transition: all 300ms ease-in-out 0s;
  width: 30px;

.btnPulse.inactive.throb::after 
  animation: 2500ms ease 300ms normal none infinite pulse-short;
  border-radius: 100%;
  bottom: -5px;
  box-shadow: 0 0 0 0 red inset;
  content: "";
  display: block;
  height: 30px;
  left: -9px;
  margin: 0 auto;
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translate3d(-2px, -50%, 0px);
  transition: all 300ms ease-in-out 0s;
  width: 30px;

.btnPulse.inactive 
  background: red none repeat scroll 0 0;
  border: medium none;
  border-radius: 100%;
  height: 10px;
  outline: medium none;
  padding: 0;
  position: relative;
  width: 10px;
  overflow: visible;

.btnPulse 
  border-radius: 50%;
  cursor: pointer;
  height: 15px;
  padding: 0;
  transition: all 300ms ease-in-out 0s;
  width: 15px;

.btn 
  -moz-user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857;
  margin-bottom: 0;
  padding: 6px 12px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;

#button-container 
  position: absolute;
  left: 100px;
  top: 100px;

<div id="button-container">
  <button class="btn btnPulse inactive throb"></button>
</div>

【讨论】：

感谢您的精彩解释。我已经经历了这一切并理解了现在的问题，并且修复工作完美。再次感谢您的意见。

嗨，我刚刚在 IE10 上测试过这个，它似乎在那里不起作用。有什么办法让它在 IE10 上运行？

为什么我在智能感知中看不到 -webkit-box-shadow 却看到很多其他的 -webkit？

动画在 IE 中不起作用的另一个原因：将关键帧放入媒体查询中！

【参考方案2】：

IE 10 和 11 需要没有 webkit 的 css 动画。如下图。

@keyframes animation
  0%width: 10px; height:10px; border-radius:5px; background:#bfbfbf;


#elementanimation: animation 2s ease-in-out 0s infinite alternate;

这终于对我有用了。