純粋なCSS：プリロードアニメーションとしてgifを表示しない

Question

私はサイドプロジェクトに取り組んでいます。ウェブサイトに追加する必要があるプリロードアニメーションがあり、JavaScriptが無効になっているときに動作するはずです。

今私はこのように、gif形式にHTMLのdivとIMGリンクを持っている：

<div class="loading"> 
    <img src="https://media.giphy.com/media/jFIgJGFHHFxde/giphy.gif"> 
</div> 

どのように私はこのGIFが消えるようにCSSを使用し、後にウェブサイトの残りのためのコンテンツを表示することができます数秒？あなたは、キーフレームアニメーションを使用することができます

Answer 1

@keyframes anime{ 
 
    0%{ 
 
    opacity:1; 
 
    } 
 
    100%{ 
 
    opacity:0; 
 
    } 
 
} 
 
@-webkit-keyframes anime{ 
 
    0%{ 
 
    opacity:1; 
 
    } 
 
    100%{ 
 
    opacity:0; 
 
    } 
 
} 
 
@keyframes anime2{ 
 
    0%{ 
 
    opacity:0; 
 
    } 
 
    100%{ 
 
    opacity:1; 
 
    } 
 
} 
 
@-webkit-keyframes anime2{ 
 
    0%{ 
 
    opacity:0; 
 
    } 
 
    100%{ 
 
    opacity:1; 
 
    } 
 
} 
 
.loading{ 
 
    animation-name:anime; 
 
    animation-duration:1s; 
 
    animation-delay:1s; 
 
    animation-fill-mode:forwards; 
 
} 
 
#info{ 
 
    opacity:0; 
 
    animation-name:anime2; 
 
    animation-duration:1s; 
 
    animation-delay:5s; 
 
    animation-fill-mode:forwards; 
 
}

<div class="loading"> 
 
    <img src="https://media.giphy.com/media/jFIgJGFHHFxde/giphy.gif"> 
 
</div> 
 
<div id="info"> 
 
The Quick Fox ate all of the fish 
 
</div>