CSS3动画无法在IE11中使用，但可以在其他浏览器中使用 [英] CSS3 animation is not working in IE11 but works in other browsers

问题描述

我在按钮上创建了CSS3动画。目前，除了IE之外，它在任何地方都能正常运行。我知道它在旧版IE中无法正常工作，但我至少希望它在IE11中能正常工作。

I have created a CSS3 animation on a button. At the moment, it works perfectly everywhere apart from IE. I know it wont work well in older IE versions, but I was atleast expecting it to work in IE11.

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

I have created a fiddle to demonstrate Fiddle

我在上调用动画：之前和：之后

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

如果您在Firefox或Chrome浏览器中打开小提琴，则应该可以看到按钮上的动画有效。如果在IE11中打开它，则它只是一个静态点。我已经上网尝试了一些事情，例如将动画帧移动到CSS文件的顶部，但是仍然无法正常工作。

If you open the fiddle in Firefox or Chrome, you should see the animation on the button working. If you open it in IE11, it is just a static dot. I have gone online and tried a few things, such as moving the animation frames to the top of the CSS file, but it still does not work.

有什么办法吗？要使此动画在IE11中工作？

Is there any way to get this animation working in IE11?

推荐答案

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

There are two things that are preventing the animation from working in IE11 and they are as follows:

• 将 animation-play-state 设置为时，IE11总是有问题正在运行。没有正当理由，应该将其视为错误。解决此问题的方法应该是从速记中删除 running 。这不会造成任何危害，因为动画播放状态 的默认值为正在运行。


• 父按钮容器的尺寸仅为10px x 10px，而伪元素最终在动画过程中的尺寸为60px x 60px。虽然其他浏览器默认情况下会显示溢出，但IE11似乎正在将其清除。这需要与规范进行交叉检查，以查明是错误还是未定义的错误。


• 解决溢出问题的方法也很简单。只需为按钮容器添加溢出：可见（ .btnPulse.inactive ）。

• IE11 always has a problem when setting animation-play-state as running in the shorthand. There is no justification for this and it should probably be considered as a bug. Fix for this issue should be to just remove the running from the shorthand. This will cause no harm because the default value for animation-play-state is running.
• The parent button container's dimension is only 10px x 10px whereas the pseudo-elements are eventually getting a dimension of 60px x 60px during the animation. While other browsers are by defaulting showing the overflow, IE11 seems to be cropping it. This needs to be cross-checked with the specs to find out if it is a bug or something that is loosely defined.
• The fix for the overflow issue is again pretty simple. Just add a overflow: visible for the button container (.btnPulse.inactive). This will also not cause any problem in other browser because they are anyway doing this by default.

显示溢出问题的代码段，这在其他浏览器中也不会引起任何问题。 ：

在下面的代码段中，我避免使用动画，只是添加了几个默认的 box-shadow 到伪元素，使得整个对象看起来像4个同心圆，中间是红色圆圈（由button元素生成），然后是白色圆圈（空白），接着是蓝色圆圈（由：before 元素的框阴影产生），然后是一个绿色圆圈（由：after 元素的框阴影产生）。

In the below snippet, I have avoided the animations and just added a couple of default box-shadow to the pseudo-elements such that the whole thing looks like 4 concentric circles with a red colored circle (produced by the button element) in the middle, followed by a white circle (blank space), followed by a blue colored circle (produced by box shadow of :before element) and then a green circle (produced by box shadow of :after element).

在 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中运行。

The below snippet has both the above mentioned fixes applied and it works in IE11, Chrome, Firefox and 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>

这篇关于CSS3动画无法在IE11中使用，但可以在其他浏览器中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！