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

Question

我在一个按钮上创建了一个CSS3动画.目前,除了IE之外,它在任何地方都能完美运行.我知道它在旧的IE版本中不会运行良好,但我至少期待它在IE11中运行.

我创造了一个小提琴来演示小提琴

我打电话给动画: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-stateis 的默认值running.
• 父按钮容器的尺寸仅为10px x 10px,而伪元素最终在动画期间获得60px x 60px的尺寸.虽然其他浏览器通过默认显示溢出,IE11似乎正在裁剪它.这需要与规范进行交叉检查,以确定它是否是一个松散定义的错误.
• 解决溢出问题再次非常简单.只需overflow: visible为按钮容器添加一个(.btnPulse.inactive).这也不会在其他浏览器中造成任何问题,因为它们默认情况下都是这样做的.

显示溢出问题的代码段:

在下面的片段中,我已经避免了动画,只是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>

使用修复程序的工作代码段:

以下代码段同时应用了上述修复程序,适用于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>