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 - ＆＃34;动画填充模式CSS属性指定CSS动画在执行之前和之后应如何将样式应用于目标。＆＃34;
将forwards设置为值会使获取的最终属性保留在元素中。

CSS3动画/淡化

1 个答案: