ロード時の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; 

}