Question

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

Answer 1

从媒体查询中取出动画css。我做了一个简单的复制和粘贴，并编辑了一点点css使其工作。如此处所述[{3}}（感谢Paulie_D）在已知问题标签

中

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

http://caniuse.com/#search=css-animation

  <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规则放在文件中，就像没有前缀一样。现代浏览器不应该需要前缀，并且在将来，前缀应该在某个时候消失...对于这个动画的东西无论如何

Answer 2

历史上，IE并没有将几种风格应用于不适用的元素   ＆＃34;有布局。＆＃34;

请参阅：http://www.satzansatz.de/cssd/onhavinglayout.html

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

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

2 个答案: