揚げログ

Karaage(krgpi)の技術開発関連のブログです

CSSアニメーション、使っていきたい

Webページを作るとき、画像でなくてもCSSで描ける記号やマークは、軽量化のためにCSSで書きたいと思っている。ブラウザのCSSレンダリングエンジンを有効活用でき、画像をダウンロードする無駄な通信を減らせる。

Googleのサイト評価サービスである「PageSpeed Insights」では、初期ロードの速さがスコアに大きく影響する。

PageSpeed Insights

サイト作成側としても、無駄なアセットが減り管理コストが低下する。当然コードベースなのでGitでデザイン変更の管理が出来ることも、メリットとして特筆すべきであろう。

予てより、github.ioにhexoを使って構築していた頃の私のブログは、CSSによるヘッダーデザインを採用していた。

f:id:krgpi:20200120235805p:plain
CSSで描画したタイル状の背景(jpg)

これにより、仮にYouTubeを見過ぎて通信制限になっていても、ヘッダー画像のロードを待機することなく、ページ全体が描画される。

このように、私のサイトでは積極的にCSSによるデザインを使ってきた。また、今後もCSSによる更に高度なデザインを作っていきたいのと同時に、動きのあるCSSにも触れていきたいと考えている。


CSSアニメーションとは

  • あるCSSのスタイル設定を別の設定へ遷移させる
  • アニメーションは2種類の要素で構成される
    • アニメーションについての記述するスタイル
    • アニメーションの始点と終点のスタイルを示すキーフレーム(通過点のスタイルも示すことができる)

JSのアニメーションに比べた利点

  • 単純なアニメーションには使いやすい
  • レンダリングエンジンのパフォーマンスを可能な限り滑らかに保てる(自動でフレームが省略されたり)
  • ブラウザはアニメーションの流れを制御してパフォーマンスと効率を最適化する

出典: animation - CSS: カスケーディングスタイルシート | MDN https://developer.mozilla.org/ja/docs/Web/CSS/animation


バイト先のエンジニアが作ってたCSSアニメーションは、もうもはや動画作品の域に達していて、凄すぎてもはや感動してしまった。

私としては、今後、自身の手がけた様々なことについて扱う、ポートフォリオのようなwebページを作りたいと考えており、そこでのデザインの一部として効果的にCSSを使っていきたいと思った。