在加载时淡入过渡到div

时间:2016-06-17 14:53:05

标签: 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>

1 个答案:

答案 0 :(得分:0)

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

}