ページの読み込み時に画像をフェードインする方法

Question

デスクトップとモバイルの両方のページの読み込み時に画像をフェードインさせるにはどうすればよいですか？今のところ、私のコードはモバイルデバイス上でしか動作しません。

CSS：

#test img { 
    width: auto; 
    height: 50px; 
    position: absolute; 
    -webkit-animation: fadein 7s; 
    -moz-animation: fadein 7s; 
    -ms-animation: fadein 7s; 
    -o-animation: fadein 7s; 
    animation: fadein 7s; 
} 

@media only screen and (max-width: 768px) { 
    #test img { 
    width: auto; 
    height: 20px; 
    position: absolute; 
    } 
} 

Answer 1

アニメーションでは、開始位置と終了位置を知るためにキーフレームが必要です。この場合、fadeinアニメーションが近くにあります。また、開始および終了の不透明度が必要なので、不可視から可視にすることもできます。以下のキーフレームを追加してみてください：ここ

@keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

の作業フィドル：https://jsfiddle.net/70p9cxdb/1/

Answer 2

CSSが提供されていないので、私は確かに言うことはできませんが、私はあなたのキーフレームがモバイルのみのメディアクエリーになると思います。何かのように@media only screen and (max-width: 768px) {