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

Question

我在按钮上创建了一个 CSS3 动画。目前，除了 IE，它在任何地方都可以完美运行。我知道它在旧的 IE 版本中不会很好地工作，但我至少希望它在 IE11 中工作。

我创建了一个 fiddle 来演示 Fiddle

我在 :before 和 :after 上调用动画

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

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

有什么方法可以让这个动画在 IE11 中正常运行吗？

Answer 1

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

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

显示溢出问题的代码段：

在下面的代码片段中，我避免了动画，只是在 pseudo-elements 中添加了几个默认的 box-shadow，这样整个东西看起来就像 4 个带红色圆圈的同心圆（由 button 元素产生）在中间，然后是一个白色圆圈（空白 space），然后是一个蓝色圆圈（由 :before 元素的框阴影产生）然后是一个绿色圆圈（由 :before 元素产生）通过 :after 元素的框阴影）。

在Chrome、Firefox和Opera中同心圆完全可见但IE11只会显示中心的红圈 因为其余部分在 parent 的区域之外。

.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>

修复后的工作代码段：

下面的代码片段应用了上述两个修复程序，并且适用于 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>

Answer 2

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

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

#element{animation: animation 2s ease-in-out 0s infinite alternate;}

这终于对我有用了。

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

CSS3 animation is not working in IE11 but works in other browsers

css

animation

css-animations

internet-explorer-11