CSS3 动画在 IE11 中不起作用，但在其他浏览器中起作用 [英] CSS3 animation is not working in IE11 but works in other browsers

问题描述

我在按钮上创建了一个 CSS3 动画.目前，除了 IE 之外，它在任何地方都可以完美运行.我知道它在较旧的 IE 版本中无法正常工作，但我至少希望它可以在 IE11 中工作.

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

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

动画:1000ms缓动0s正常无无限运行脉冲长；

如果您在 Firefox 或 Chrome 中打开 fiddle，您应该会看到按钮上的动画正常工作.如果在IE11中打开，它只是一个静态点.我上网尝试了一些东西，比如把动画帧移动到CSS文件的顶部，但还是不行.

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

解决方案

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

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

显示溢出问题的代码段:

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

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

.btnPulse.inactive.throb::before {box-shadow: 0 0 0 16px 蓝色插图；显示:块；高度:60px；左:-22px；边距:0 自动；右:0；顶部:50%；变换:translate3d(-3px, -50%, 0px);宽度:60px；}.btnPulse.inactive::before {边界半径:100%；底部:-5px；box-shadow: 0 0 0 1px 红色插图；内容: "";显示:块；高度:30px；左:-10px；边距:0 自动；位置:绝对；右:-5px；顶部:-5px；过渡:所有 300 毫秒的缓入缓出 0；宽度:30px；}.btnPulse.inactive.throb::after {边界半径:100%；底部:-5px；框阴影:0 0 0 8px 绿色插图；内容: "";显示:块；高度:60px；左:-22px；边距:0 自动；位置:绝对；右:-5px；顶部:50%；变换:translate3d(-2px, -50%, 0px);过渡:所有 300 毫秒的缓入缓出 0；宽度:60px；}.btnPulse.inactive {背景:红色无重复滚动0 0；边框:中无；边界半径:100%；高度:10px；大纲:中等无；填充:0；位置:相对；宽度:10px；}.btn脉冲{边界半径:50%；光标:指针；高度:15px；填充:0；过渡:所有 300 毫秒的缓入缓出 0；宽度:15px；}.btn {-moz-user-select:无；背景图像:无；边框:1px 实心透明；边框半径:4px；光标:指针；显示:内联块；字体大小:14px；字体粗细:400；行高:1.42857；底边距:0；填充:6px 12px；文本对齐:居中；垂直对齐:中间；空白:nowrap；}#按钮容器{位置:绝对；左:100px；顶部:100px；}

<button class="btn btnPulse inactive throb"></button>

<小时>

修复工作片段:

以下代码段应用了上述修复程序，并且适用于 IE11、Chrome、Firefox 和 Opera.

@keyframes pulse-short {100% {框阴影:插入 0 0 0 80px 红色；-moz-box-shadow:插入 0 0 0 80px 红色；-webkit-box-shadow:插入 0 0 0 80px 红色；高度:60px；宽度:60px；左:-22px；不透明度:0；}}@keyframes 脉冲长 {100% {框阴影:插入 0 0 0 10px 红色；-moz-box-shadow:插入 0 0 0 10px 红色；-webkit-box-shadow:插入 0 0 0 10px 红色；高度:60px；宽度:60px；左:-22px；不透明度:0；}}.btnPulse.inactive.throb::before {动画:1000 毫秒缓动 0 秒正常无无限脉冲长；框阴影:0 0 0 0 红色插图；显示:块；高度:100%；左:3px；边距:0 自动；右:0；顶部:50%；变换:translate3d(-3px, -50%, 0px);宽度:100%；}.btnPulse.inactive::before {边界半径:100%；底部:-5px；box-shadow: 0 0 0 1px 红色插图；内容: "";显示:块；高度:30px；左:-10px；边距:0 自动；位置:绝对；右:-5px；顶部:-5px；过渡:所有 300 毫秒的缓入缓出 0；宽度:30px；}.btnPulse.inactive.throb::after {动画:2500 毫秒缓和 300 毫秒正常非无限脉冲短；边界半径:100%；底部:-5px；框阴影:0 0 0 0 红色插图；内容: "";显示:块；高度:30px；左:-9px；边距:0 自动；位置:绝对；右:-5px；顶部:50%；变换:translate3d(-2px, -50%, 0px);过渡:所有 300 毫秒的缓入缓出 0；宽度:30px；}.btnPulse.inactive {背景:红色无重复滚动0 0；边框:中无；边界半径:100%；高度:10px；大纲:中等无；填充:0；位置:相对；宽度:10px；溢出:可见；}.btn脉冲{边界半径:50%；光标:指针；高度:15px；填充:0；过渡:所有 300 毫秒的缓入缓出 0；宽度:15px；}.btn {-moz-user-select:无；背景图像:无；边框:1px 实心透明；边框半径:4px；光标:指针；显示:内联块；字体大小:14px；字体粗细:400；行高:1.42857；底边距:0；填充:6px 12px；文本对齐:居中；垂直对齐:中间；空白:nowrap；}#按钮容器{位置:绝对；左:100px；顶部:100px；}

<button class="btn btnPulse inactive throb"></button>

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

I call the animation on :before and :after like so

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

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.

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

解决方案

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

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

Snippet showing the overflow problem:

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

In Chrome, Firefox and Opera the concentric circles would be visible completely but IE11 will show only the center red circle because the rest is outside parent's area.

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

---

Working Snippet with the fix:

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屋！