Css动画在Internet Explorer中不起作用，改变不透明度答案

【问题标题】：Css animation doesn't work in internet explorer, changing opacityCss动画在Internet Explorer中不起作用，改变不透明度
【发布时间】：2015-09-28 09:52:19
【问题描述】：

Css 动画在 Internet Explorer 11 中肯定不起作用。所有其他浏览器的动画效果都非常好。这是一个网站：http://susannahpryce.esy.es

我在IE中检查了firebug，它读取代码没有错误，所以我不知道为什么它不起作用，我使用的是IE 11。

这是我的代码

body .main .header-box {
    background-color: #fff;
    height: 500px;
    width: 100%;
    float: left; }
    body .main .header-box .slide-area {
      margin: 0 9%; }
      body .main .header-box .slide-area #pic1 {
        position: absolute;
        z-index: 5;
        -webkit-animation-duration: 60s;
        -webkit-animation-delay: 10s;
        -webkit-transition-timing-function: ease;
        -webkit-animation-name: slide-fade;
        -webkit-animation-iteration-count: infinite;
        -ms-animation-duration: 60s;
        -ms-animation-delay: 10s;
        -ms-transition-timing-function: ease;
        -ms-animation-name: slide-fade;
        -ms-animation-iteration-count: infinite;
        -moz-animation-duration: 60s;
        -moz-animation-delay: 10s;
        -moz-transition-timing-function: ease;
        -moz-animation-name: slide-fade;
        -moz-animation-iteration-count: infinite; }
      body .main .header-box .slide-area #pic2 {
        position: absolute;
        z-index: 4;
        -webkit-animation-duration: 60s;
        -webkit-animation-delay: 20s;
        -webkit-transition-timing-function: ease;
        -webkit-animation-name: slide-fade;
        -webkit-animation-iteration-count: infinite;
        -ms-animation-duration: 60s;
        -ms-animation-delay: 20s;
        -ms-transition-timing-function: ease;
        -ms-animation-name: slide-fade;
        -ms-animation-iteration-count: infinite;
        -moz-animation-duration: 60s;
        -moz-animation-delay: 20s;
        -moz-transition-timing-function: ease;
        -moz-animation-name: slide-fade;
        -moz-animation-iteration-count: infinite; }
      body .main .header-box .slide-area #pic3 {
        position: absolute;
        z-index: 3;
        -webkit-animation-duration: 60s;
        -webkit-animation-delay: 30s;
        -webkit-transition-timing-function: ease;
        -webkit-animation-name: slide-fade;
        -webkit-animation-iteration-count: infinite;
        -ms-animation-duration: 60s;
        -ms-animation-delay: 30s;
        -ms-transition-timing-function: ease;
        -ms-animation-name: slide-fade;
        -ms-animation-iteration-count: infinite;
        -moz-animation-duration: 60s;
        -moz-animation-delay: 30s;
        -moz-transition-timing-function: ease;
        -moz-animation-name: slide-fade;
        -moz-animation-iteration-count: infinite; }
      body .main .header-box .slide-area #pic4 {
        position: relative;
        z-index: 2; }
  @-webkit-keyframes slide-fade {
  0% {
  opacity: 1; }
  5% {
  opacity: 0; }
  50% {
  opacity: 0; }
  55% {
  opacity: 1; }
  100% {
  opacity: 1; } }
  @-ms-keyframes slide-fade {
  0% {
  opacity: 1; }
  5% {
  opacity: 0; }
  50% {
  opacity: 0; }
  55% {
  opacity: 1; }
  100% {
  opacity: 1; } }
  @-moz-keyframes slide-fade {
  0% {
  opacity: 1; }
  5% {
  opacity: 0; }
  50% {
  opacity: 0; }
  55% {
  opacity: 1; }
  100% {
  opacity: 1; } }

【问题讨论】：

拥有浏览器前缀很棒，但您应该始终包含正常规则。示例animation-duration: 60s;
据我所知，IE 不再使用动画前缀...如果有的话 - caniuse.com/#search=css-animation
另请注意IE10 and IE11 do not support CSS animations inside media queries. 这是在 Paulie_D 链接的已知问题选项卡中。您的动画在媒体查询中。尝试将动画 css 从媒体查询中取出，看看它是否有效。在 IE 11 上，这些图像对我来说根本没有动画

标签： css internet-explorer animation

【解决方案1】：

从媒体查询中取出动画 css。我做了一个简单的复制和粘贴，并稍微编辑了 css 以使其工作。如此处所述http://caniuse.com/#search=css-animation（感谢 Paulie_D）在已知问题选项卡中

IE10 和 IE11 不支持媒体查询中的 CSS 动画。

http://jsfiddle.net/xmfj0tk7/

  <div class="header-box">
      <div class="slide-area">
         <img id="pic1" src="http://susannahpryce.esy.es/wp-content/themes/sue/pics/hq-1-optimized.jpg" />
         <img id="pic2" src="http://susannahpryce.esy.es/wp-content/themes/sue/pics/hq-2-optimized.jpg" />
         <img id="pic3" src="http://susannahpryce.esy.es/wp-content/themes/sue/pics/hq-3-optimized.jpg" />
         <img id="pic4" src="http://susannahpryce.esy.es/wp-content/themes/sue/pics/hq-4-optimized.jpg" />
      </div>

      <div class="slide-area_480">
      </div>

      <div class="slide-area_640">
      </div>

   </div>

您还应该将正常的 css 规则放入您的文件中，就像不带前缀一样。现代浏览器不应该需要前缀，并且在未来，前缀应该会在某个时候消失......无论如何，对于这个动画的东西

【讨论】：

【解决方案2】：

从历史上看，IE 不会将几种样式应用于不 “有布局。”

见：http://www.satzansatz.de/cssd/onhavinglayout.html

Here 是一个关于 IE 不透明度的问题。

【讨论】：