로드시 div 로의 페이드 전환

Question

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>

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

}