CSSアニメーション、使っていきたい
Webページを作るとき、画像でなくてもCSSで描ける記号やマークは、軽量化のためにCSSで書きたいと思っている。ブラウザのCSSレンダリングエンジンを有効活用でき、画像をダウンロードする無駄な通信を減らせる。
Googleのサイト評価サービスである「PageSpeed Insights」では、初期ロードの速さがスコアに大きく影響する。
サイト作成側としても、無駄なアセットが減り管理コストが低下する。当然コードベースなのでGitでデザイン変更の管理が出来ることも、メリットとして特筆すべきであろう。
予てより、github.ioにhexoを使って構築していた頃の私のブログは、CSSによるヘッダーデザインを採用していた。
これにより、仮にYouTubeを見過ぎて通信制限になっていても、ヘッダー画像のロードを待機することなく、ページ全体が描画される。
このように、私のサイトでは積極的にCSSによるデザインを使ってきた。また、今後もCSSによる更に高度なデザインを作っていきたいのと同時に、動きのあるCSSにも触れていきたいと考えている。
CSSアニメーションとは
- あるCSSのスタイル設定を別の設定へ遷移させる
- アニメーションは2種類の要素で構成される
- アニメーションについての記述するスタイル
- アニメーションの始点と終点のスタイルを示すキーフレーム（通過点のスタイルも示すことができる）
JSのアニメーションに比べた利点
- 単純なアニメーションには使いやすい
- レンダリングエンジンのパフォーマンスを可能な限り滑らかに保てる（自動でフレームが省略されたり）
- ブラウザはアニメーションの流れを制御してパフォーマンスと効率を最適化する
出典： animation - CSS: カスケーディングスタイルシート | MDN https://developer.mozilla.org/ja/docs/Web/CSS/animation
バイト先のエンジニアが作ってたCSSアニメーションは、もうもはや動画作品の域に達していて、凄すぎてもはや感動してしまった。
私としては、今後、自身の手がけた様々なことについて扱う、ポートフォリオのようなwebページを作りたいと考えており、そこでのデザインの一部として効果的にCSSを使っていきたいと思った。
