加载时淡入淡出过渡到 div [重复]

Posted 2023-03-06

【中文标题】加载时淡入淡出过渡到 div [重复]

【英文标题】：fade transition to a div on load [duplicate]

【发布时间】：2016-10-19 11:21:17

【问题描述】：

您能否在加载时仅使用 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>

【参考方案1】：

@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;