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作为一个值使得获取的最终属性保留在元素中。