CSS の座標変換とアニメーション
メモ: ご覧の通り、このモジュールは現在、カリキュラムの概要/シラバスのみであり、スターターガイドへのリンクがいくつか提供されているだけです。将来的には、時間が許せば、このモジュールを完全なコースに変換することを目指しています。
アニメーションは、使い勝手を良くするためには欠かせない要素です。 アニメーションをうまく使うことで、ページデザインをより興味深く魅力的なものにすることができます。また、ユーザビリティと知覚的パフォーマンスも向上します。
前提知識
学習成果
- CSS 座標変換とアニメーションが必要である理由を理解すること。
- 注意点として、使いすぎると、ユーザビリティとアクセシビリティに悪影響を及ぼす可能性があること。
- 一般的な座標変換 — 変倍、回転、平行移動。
- 3D 座標変換、およびウェブ上で 3D の位置指定/視点位置を処理する方法。
- トランジション。
- アニメーション
ガイド
- CSS 座標変換の使用
-
CSS の座標変換は、座標空間を変更することで、通常の文書内のフローを乱すことなく、影響を受けるコンテンツの図形や位置を変更します。このガイドでは、座標変換の使用方法について紹介しています。
- CSS トランジションの使用
-
CSS トランジションは、 CSS プロパティを変更する際のアニメーション速度を制御できる方法を提供します。プロパティの変更を即座に反映させるのではなく、プロパティの変更を一定の時間かけて行うことができます。例えば、要素の色を白から黒に変更した場合、通常は即座に変更が反映されます。 CSS トランジションを有効にすると、加速曲線に従う時間間隔で変更が反映され、すべてをカスタマイズすることができます。
- CSS アニメーションの使用
-
CSS アニメーションを使用すると、ある CSS のスタイル設定を別の設定に遷移させるアニメーションを作成することができます。 アニメーションは、 2 つの部分から構成されています。 1 つは、CSS アニメーションを記述するスタイル、もう 1 つは、アニメーションのスタイルの開始時と終了時の状態、および可能な中間状態を示すキーフレームを設定する部分です。