CSS关键帧图像fadeInOut拒绝动画

图像显示在浏览器上，但动画不起作用。

我认为这个问题与@keyframes或＃cf3 img.top部分有关...其他部分似乎工作..在Chrome上测试。

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Test</title> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 

    <body> 
     <div id="cf"> 
      <img class="bottom" src="assets/1.png" /> 
      <img class="top" src="assets/2.png" /> 
     </div> 
    </body> 
</html>

的style.css，这就是衰落的动画是：

#cf { 
    position: relative; 
    height: 281px; 
    width: 450px; 
    margin: 0 auto; 
} 

#cf img { 
    position: absolute; 
    left: 0; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 

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

#cf3 img.top { 
    animation-name: cf3FadeInOut; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
    animation-duration: 10s; 
    animation-direction: alternate; 
}

来源

2017-04-05 GreetingsFriend

“CSS似乎不起作用。”整个CSS？或只是一些部分？ –

我认为这个问题与@keyframes或＃cf3 img.top部分有关...其他部分似乎工作。 – GreetingsFriend

好的，你可以在你的文章中指定，以减少歧义谢谢！ –