html - 加载时淡入淡出过渡到 div

标签 html css

<分区>

您能否仅使用 CSS 将淡入淡出过渡应用于加载时的 div?我有一个 div,它最初应该是透明的,几秒钟后应该变成黄色。我知道可以在状态更改时执行此操作(例如悬停)。谁能帮忙?

干杯

#content {
    background-color: #FF0;
    height: 100px; width: 100px;
    -webkit-transition: background-color 10000ms linear;
    -moz-transition: background-color 10000ms linear;
    -o-transition: background-color 10000ms linear;
    -ms-transition: background-color 10000ms linear;
    transition: background-color 10000ms linear;
}
<div id="content"></div>

最佳答案

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

#content {
animation-name: fadeInAnimation;
animation-duration: 500ms;
animation-fill-mode: forwards;
background-color: #FF0;
height: 100px; width: 100px;
-webkit-transition: background-color 10000ms linear;
-moz-transition: background-color 10000ms linear;
-o-transition: background-color 10000ms linear;
-ms-transition: background-color 10000ms linear;
transition: background-color 10000ms linear;

关于html - 加载时淡入淡出过渡到 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37884641/

上一篇:html - 如何在内容滚动时固定标题

下一篇:html - 保持不均匀间距比例的 'scale-last' 内容 block

相关文章:

javascript - 隐藏 id 大于 $number 的行

html - Twitter BootStrap、粘性页脚和 100% 高度下潜给页面额外不必要的滚动

html - 100vh 和移动响应式设计

css - SASS 放置双重属性名称,为什么?

javascript - jQuery 不能使用 addClass

CSS float : left layout moves

html - 为什么我的div里面的内容会弹出来?

javascript - 无法读取未定义/TypeError : event is undefined 的属性 'target'

HTML 时事通讯 - 将具有不同字体大小的相邻单元格对齐到底部

html - 尝试为 div 添加定位