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始终存在问题。这没有任何理由，它应该被视为一个错误。修复此问题应该只是从速记中删除running。这不会造成任何伤害，因为animation-play-state的默认值为running。
父按钮容器的尺寸仅为10px x 10px，而伪元素最终在动画期间获得60px x 60px的尺寸。虽然其他浏览器通过默认显示溢出，IE11似乎正在裁剪它。这需要与规范进行交叉检查，以确定它是否是一个松散定义的错误。
溢出问题的修复再次非常简单。只需为按钮容器overflow: visible添加.btnPulse.inactive即可。这也不会导致其他浏览器出现任何问题，因为默认情况下它们都是这样做的。

显示溢出问题的小部件：

在下面的代码片段中，我已经避免了动画，只是在伪元素中添加了几个默认box-shadow，这样整个事物看起来就像是带有红色圆圈的4个同心圆（由按钮产生）元素）在中间，然后是一个白色圆圈（空白区域），接着是一个蓝色圆圈（由:before元素的框阴影产生），然后是一个绿色圆圈（由{{1}的框阴影产生元素）。

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

:after

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

使用修补程序的工作代码段

以下代码段同时应用了上述修复程序，适用于IE11，Chrome，Firefox和Opera。

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

@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;
}

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;}

这最终对我有用。

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

2 个答案: