使用 CSS3 使图像/div 淡化，而不使用悬停

Posted 2023-03-06

【中文标题】使用 CSS3 使图像/div 淡化，而不使用悬停

【英文标题】：Making an image / div fade with CSS3, without using a hover

【发布时间】：2011-03-18 18:48:45

【问题描述】：

我有一个 div，里面有一张图片。目前我使用 CSS3 动画将其淡出，但性能很糟糕。

我很确定我应该使用过渡。问题是我找不到一个不是由悬停触发的示例。

我怎样才能使页面加载时，延迟 2 秒后，图像/div 从 0% 淡入？

目前，正如我对动画所说，我有：

@-webkit-keyframes fadetime 
from 
 opacity: 0;


50% 
 opacity: 0;


to 
 opacity: 1;
    

有什么想法吗？谢谢。

【问题讨论】：

你可以在类中使用过渡，然后在 2 秒后用 css 添加类。

【参考方案1】：

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


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

【讨论】：

嗨，这很容易适应创建一个图片库，你会如何淡出第一层显示第二层，然后第二层显示第三层等等。谢谢加里跨度>

【参考方案2】：

使用 jQuery 可能是更好的选择：

<script type="text/javascript">

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

);

</script>

#mainContent 是你想要淡入的 div

【讨论】：

Jquery 比 CSS3 动画慢很多。

jQuery 是一个很好的后备方案（使用 Modernizr 来检测 CSS 动画支持），但是 CSS3 动画要快得多，并且可能在不久的将来会采用