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

我试图创建一个纯CSS动画（淡入淡出定时器），而不使用jQuery。当我检查IE10和IE11时，动画不起作用。在Firefox、Safari和Chrome上，它可以完美地工作

我怎样才能让它在IE10和IE11中也起作用

以下是我的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代码，它在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;
}

---

可能重复的Hi@Paulie\D感谢链接。我已经检查并发现我丢失了一些CSS代码行，我已经更新了这些代码，但是淡入/淡出仍然不能与IE10+一起工作。

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