打开页面时的 CSS 不透明度过渡答案

【问题标题】：CSS opacity transition on page open打开页面时的 CSS 不透明度过渡
【发布时间】：2021-03-02 12:26:29
【问题描述】：

我希望我的 CSS div 在页面打开但 2 秒后出现在屏幕上时完全不可见。我尝试设置不透明度：0；然后过渡：不透明度100 2s；但它没有用。例如，我不希望 CTA 在他们悬停之后发生，而是我希望它发生，即使用户不移动鼠标。请帮忙！

【问题讨论】：

请使用代码 sn-p (ctrl + m) 来显示您的编码尝试。
不透明度应该在 0-1 之间。不透明度：0 => 0%，不透明度：1 => 100%

【解决方案1】：

您可以使用 CSS 动画来制作它。像这样- HTML-

<div class="div"></div>

还有 CSS-

<style>
.div{
    width:100px;
    height:100px;
    background:red;
    animation-name:opacity;
    animation-duration:4s;
}
    @keyframes opacity{
    0%{opacity:0;}
    100%{opacity:1;}
}
</style>

【讨论】：

【解决方案2】：

你可以简单地使用 CSS 动画而不是过渡。考虑具有单个 div 元素的 HTML 代码

<div id="main"></div>

现在要应用 CSS 动画，我们可以这样做，

#main{
   ...add your desired code for styling the div...
   animation-name:onload;
   animation-duration: 1s;
   animation-delay: 2s;  //this is the key line, what this means is the animation would start after 2s of delay.

}

// 正在创建动画

@keyframes onload{
    0%{
       opacity:0;
    }
    100%{
       opacity: 1;
    }
}

【讨论】：