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

Question

我已经在一个按钮上创建了一个CSS3动画。目前，除了IE之外，它在任何地方都能完美地工作。我知道它在老的IE版本中不能很好地工作，但我至少希望它能在IE11中工作。

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

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

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

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

有没有办法让这个动画在IE11中工作？

Answer 1

有两个因素会阻止动画在IE11中工作，它们如下所示：

在速记中将animation-play-state设置为running时，

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

显示溢出问题的片段：

在下面的代码片段中，我已经避免了动画，只是在伪元素中添加了几个默认的按钮，使得整个东西看起来像4个同心圆，中间有一个红色的圆(由box-shadow元素产生)，接着是一个白色的圆(空白)，接着是一个蓝色的圆(由:before元素的框阴影产生)，然后是一个绿色的圆(由:after元素的框阴影产生)。

在浏览器，火狐和歌剧中，同心圆将完全可见，但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>

​

修复后的工作片段：

下面的代码片段应用了上述两个修复，它可以在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需要没有webkit的css动画。如下所示。

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

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

这对我来说终于管用了。