Question

我正在尝试使用CSS3在div上创建淡入淡出。

我可以让div淡入，然而，我似乎无法让div在淡入效果之前不可见。

我最终想在我的页面中使用多个div进行此操作。

到目前为止，我创造了一个简单的小提琴http://jsfiddle.net/dan_gribble/Aq4nK/

HTML是：

<div id="test">
</div>

CSS是：

#test {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid black;
    background-color: red;

    -webkit-animation: fadein_screen_01 2s;  -webkit-animation-delay:  2s;
    -moz-animation:    fadein_screen_01 2s;  -moz-animation-delay:     2s; 
    -ms-animation:     fadein_screen_01 2s;  -ms-animation-delay:      2s;
    -o-animation:      fadein_screen_01 2s;  -o-animation-delay:       2s;
    animation:         fadein_screen_01 2s;  animation-delay:          2s;
}

@-webkit-keyframes fadein_screen_01 {0% {opacity: 0;} 100% {opacity: 1;}} 
@-moz-keyframes fadein_screen_01 {0% {opacity: 0;} 100% {opacity: 1;}} 
@-ms-keyframes fadein_screen_01 {0% {opacity: 0;} 100% {opacity: 1;}}
@-o-keyframes fadein_screen_01 {0% {opacity: 0;} 100% {opacity: 1;}} 
@keyframes fadein_screen_01 {0% {opacity: 0;} 100% {opacity: 1;}}

非常感谢任何帮助。

Answer 1

你可以通过一些脚本来实现这一点。

CSS

    
#targetElement { 
    background-color:#000;
    opacity: 0; 
    transition: 1s; 
}
#targetElement.opaque { opacity:1; transition:1s; }

HTML


    <p id="targetElement">Lorem</p>

的jQuery

    $('#targetElement').addClass('opaque');

您的元素默认设置为不透明度：0。在页面加载时，为其分配一个类，使其具有不透明度：1，并将其转换设置为taste。您可以对所有元素执行此操作，也可以使用包含或覆盖其他元素的元素执行此操作。

http://jsfiddle.net/mqxz8/

Answer 2

感谢您的帮助，但我已经使用了CSS3。

我需要做的就是在动画之后将以下CSS添加到我的#test ID：settings。

-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards; 
-o-animation-fill-mode:forwards; 
-ms-animation-fill-mode:forwards; 
animation-fill-mode:forwards;

更新了JSFiddle http://jsfiddle.net/Aq4nK/4/

CSS3 - 淡入效果

2 个答案: