使图像/ div褪色与CSS3，而不使用悬停

我有一个图像的div与它。目前我使用CSS3动画淡化它，但性能很糟糕。使图像/ div褪色与CSS3，而不使用悬停

我很确定我应该使用转换。问题是我找不到一个没有被悬停触发的例子。

如何使页面加载后延迟2秒后图像/ div从0％淡入？

此刻，我与动画说，我有：

@-webkit-keyframes fadetime { 
from { 
opacity: 0; 
} 

50% { 
opacity: 0; 
} 

to { 
opacity: 1; 
    } 
}

任何想法？谢谢。

来源

2010-07-21 user397466

你可以使用一个类中的过渡褪色的股利，然后添加2秒后用css进行类。 – starbeamrainbowlabs 2012-08-24 15:21:48

使用jQuery可能是一个更好的方式去：

<script type="text/javascript"> 

$(document).ready(function() { 
$('#mainContent').hide(); 
$('#mainContent').delay(2000).fadeIn(500); 

}); 

</script>

哪里#mainContent是要在

来源

2010-09-14 12:43:39 Anthony

Jquery比CSS3动画更加笨拙。 – 2011-04-12 12:42:08

jQuery作为后备（使用Modernizr检测CSS动画支持）效果很好，但是CSS3动画要快得多，并且很可能在不久的将来会走到一起 – ABailiss 2011-09-09 10:29:52

@-webkit-keyframes FadeIn { 
    0% { 
     opacity:0; 
    } 
    100% { 
     opacity:1; 
    } 
} 

.object { 
    -webkit-animation-name: FadeIn; 
    -webkit-animation-timing-function: ease-in; 
    -webkit-animation-duration: 3s; 
}

来源

2011-02-01 07:25:37

嗨，是否很容易适应这种情况来创建图库，如何你去fadeOut第一层揭示第二层，然后第二层揭示第三等谢谢加里 – Gary 2011-06-03 07:27:52

使图像/ div褪色与CSS3，而不使用悬停

回答

相关问题