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 - “animation-fill-mode CSS 属性指定 CSS 动画在执行前后应如何将样式应用于其目标。”
将 forwards 设置为一个值会使获取的最终属性保留在元素中。