エレメントを隠し、純粋にCSSトランジションでフェードインする最も信頼性の高い方法は何ですか？

Question

ページが読み込まれたときにHTML要素を非表示にしてから、CSSトランジションでフェードインしたいとします。私の計画では、不透明度を0に設定し、CSSアニメーションを使用して1に変換します。 しかし、CSSトランジションを処理できない古いブラウザではコンテンツが隠されたままになることが心配です。 コンテンツを非表示にするより安全な方法はありますか？または、このコードを処理できないブラウザからこのコードを除外することはできますか？

Answer 1

いつもの問題はIEの古いバージョンにあります。
http://caniuse.com/#feat=css-animation

私は、プログレッシブエンハンスメントの大きな信者であり、CSSだけを処理しています。

Javascriptを使用すると、古いブラウザやModernizrのようなライブラリを使用することができますが、私はこれらの種類のソリューションが嫌いで、そこには問題があります。ビジターがJSを無効にしている場合はどうなりますか？

幸運なことに、古いブラウザでアニメーションのフェードを無視することができます。ちょうどあなたが0

div { 
    height: 300px; 
    width: 300px; 
    background-color: red; 
    opacity: 1; 
    animation: fadeIn 7s ease infinite; 
} 
@keyframes fadeIn { 
    0% { opacity: 0; } 
    50% { opacity: 1; } 
    100% { opacity: 0; } 
} 

本当に良いアドバイスのように見えます

https://jsfiddle.net/3rzL0xz8/