CSS3動畫/淡入淡出

Question

下午好，我試圖在3秒後自動淡出一個圖像到另一個。一旦第二個圖像是100％不透明度，我需要它留下，而不是循環。做這個的最好方式是什麼？

Answer 1

DEMO

CSS：

/*Add required verdon prefixes*/ 
img{ 
    width:300px; height:300px; 
    display:block; 

    /* Background in place of `src` attribute*/ 
    background:url("http://placehold.it/200x200"); 

    opacity:0; 

    /*`fade` = name; `3s` = duration; `1` - number of times animation takes place*/ 
    -webkit-animation:fade 3s 1; 
    -moz-animation:fade 3s 1; 

    -webkit-animation-fill-mode: forwards; 
    -moz-animation-fill-mode: forwards; 
} 

@-webkit-keyframes fade{ 
    to{ 
     opacity:1; 
     background:url("http://placehold.it/250x200"); 
    } 
} 

@-moz-keyframes fade{ 
    to{ 
     opacity:1; 
     background:url("http://placehold.it/250x200"); 
    } 
} 

使用

重要特性：

animation-fill-mode - 如何在CSS動畫應適用「動畫填充模式CSS屬性指定樣式到它的目標執行前後「。
設置forwards作爲一個值使得獲取的最終屬性保留在元素中。