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フィルターの各ブラウザサポート状況です
