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

好的，你可以在你的文章中指定，以減少歧義謝謝！ –