Result

CSSだけでアクセス時に徐々に任意のコンテンツを表示させます
本記事ではblurを使用していますがopacity等でもタイトルの目的は果たせます
簡単なkeyframesで実装出来ます。delayも併用すればもうすこし応用が利きそうです。

css

p {
  animation: fade 3s 1;
}

@keyframes fade {/*blurを徐々に解除するアニメーション*/
  0% {
    filter: blur(40px);
  }
  100% {
    filter: blur(0);
  }
}

html

<div class="code">
<span>foobar</span><br>
  <p>Lorem Ipsum.</p>
</div>

can i use

cssフィルターの各ブラウザサポート状況です

via

Happy Ada Lovelace Day