CSS3 - 淡入效果答案

【问题标题】：CSS3 - Fade In effectCSS3 - 淡入效果
【发布时间】：2014-07-18 21:10:26
【问题描述】：

我正在尝试使用 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;}}

任何帮助将不胜感激。

【问题讨论】：

也许我在这里看不到正确的东西，但你的圈子最初对我来说是不可见的。马克铬。除此之外，您不能将 opacity:0 添加到#test css 中吗？
这里也一样。它适用于我在 chrome 中的 Windows 8 上
谢谢大家，我刚刚在运行 IE11、Firefox 30.0、Opera 12.16 和 Chrome 36.0.1985.125m 的办公电脑（Windows 7 pro）上再次尝试了它。我希望它运行的唯一版本是在 Chrome 上。在其他浏览器中，圆圈在淡入效果之前可见。我试过设置不透明度：0；最初在 ID #test 上，但是，在淡入效果运行后，它返回到 opacity: 0;状态我希望它保持不透明：1；有什么建议我怎么能做到这一点？理想情况下，我希望将其全部保存在 CSS3 而不是 Javascript 中。

标签： html css

【解决方案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');

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

http://jsfiddle.net/mqxz8/

【讨论】：

【解决方案2】：

感谢你们的帮助，但我已经使用 CSS3 完成了我需要的工作。

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

-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/

【讨论】：