Question

我试图在不使用jQuery的情况下创建纯CSS动画（使用计时器淡入/淡出）。当我检查IE10和IE11时，动画不起作用。在Firefox，Safari和Chrome上，它可以完美运行。

我怎样才能在IE10和11中使用它？

这是我的HTML代码：

<div id="cf">
    <div>
        <img class="bottom" src="image1.jpg" alt="Image 1" title="Image 1" />
    </div>
    <div>
        <img class="top" src="image2.jpg" alt="Image 2" title="Image 2" />
    </div>
</div>

这是我的CSS代码：

#cf {
  position:relative;
  height:550px;
  width:600px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
}

@-webkit-keyframes cf3FadeInOut {
  0%   { opacity: 1; }
  45%   { opacity: 1; }
  55%   { opacity: 0; }
  100% { opacity: 0; }
}

@-moz-keyframes cf3FadeInOut {
  0%   { opacity: 1; }
  45%   { opacity: 1; }
  55%   { opacity: 0; }
  100% { opacity: 0; }
}

@-ms-keyframes cf3FadeInOut {
  0%   { opacity: 1; }
  45%   { opacity: 1; }
  55%   { opacity: 0; }
  100% { opacity: 0; }
}

@-o-keyframes cf3FadeInOut {
  0%   { opacity: 1; }
  45%   { opacity: 1; }
  55%   { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes cf3FadeInOut {
  0%   { opacity: 1; }
  45%   { opacity: 1; }
  55%   { opacity: 0; }
  100% { opacity: 0; }
}

#cf img.top {
    animation-name: cf3FadeInOut;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 6s;
    animation-direction: alternate;
    -webkit-animation: cf3FadeInOut 6s infinite;
    -webkit-animation-timing-function: linear; 
    -webkit-animation-direction: alternate; 
}

Answer 1

我现在更新的CSS代码如下，但仍然无法在IE10 +上运行，但已经在Firefox，Chrome，Safari中测试过，并且仍在使用。

#cf {
  position:relative;
  height:550px;
  width:600px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
}

@-webkit-keyframes cf3FadeInOut {
 0%   { filter: alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; opacity: 1; }
 45%   { filter: alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; opacity: 1; }
 55%   { filter: alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity: 0; }
 100% { filter: alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity: 0; }
}

@-moz-keyframes cf3FadeInOut {
 0%   { filter: alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; opacity: 1; }
 45%   { filter: alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; opacity: 1; }
 55%   { filter: alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity: 0; }
 100% { filter: alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity: 0; }
}

@-o-keyframes cf3FadeInOut {
 0%   { filter: alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; opacity: 1; }
 45%   { filter: alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; opacity: 1; }
 55%   { filter: alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity: 0; }
 100% { filter: alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity: 0; }
}

@-ms-keyframes cf3FadeInOut {
 0%   { filter: alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; opacity: 1; }
 45%   { filter: alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; opacity: 1; }
 55%   { filter: alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity: 0; }
 100% { filter: alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity: 0; }
}

@keyframes cf3FadeInOut {
 0%   { filter: alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; opacity: 1; }
 45%   { filter: alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; opacity: 1; }
 55%   { filter: alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity: 0; }
 100% { filter: alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity: 0; }
}


#cf img.top {
    animation: cf3FadeInOut 6s;
    -ms-animation-name: cf3FadeInOut 6s;
    -moz-animation: cf3FadeInOut 6s; /* Firefox */
    -webkit-animation: cf3FadeInOut 6s; /* Safari and Chrome */ 

    animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -moz-animation-timing-function: linear; 
    -webkit-animation-timing-function: linear;

    animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;

    animation-direction: alternate;
    -ms-animation-direction: alternate;  
    -moz-animation-direction: alternate;
    -webkit-animation-direction: alternate;
}

使用关键帧动画的纯CSS拒绝动画

1 个答案: