トランジションとアニメーション
ボタンに:hover色を加えて動作しますが、変化は急激です。1フレームは青で、次のフレームは暗くなり、その間には何もありません。わずかなフェードがあれば、ページ全体がジャンプして見えなくなります。そのフェードはトランジションであり、2つの状態間のモーションを記述できれば、同じツールはホバー効果、持ち上がるカード、そして何かが読み込まれている間に回転するスピナーにスケールアップします。この章は、CSSがどのようにものを動かすか、そしてページを使いにくくしないように動かす方法についてです。
トランジション
**トランジション**は、プロパティを古い値から新しい値にアニメートするのではなく、その間をスナップするのではなく、スナップするのではなく、アニメートするようにブラウザに指示します。通常の状態とホバー状態の2つの状態を記述し、トランジションがその間のフレームを埋めます。
ホバー時に色が変わるボタンです。トランジションなしでは色がジャンプします。あれば色がフェードします。
.btn {
background: #3b82f6;
transition: background 0.2s; /* 0.2秒かけて色をフェード */
}
.btn:hover {
background: #1d4ed8; /* アニメートする新しい状態 */
}transitionを:hoverではなく通常の状態に置きます。そうすることで、マウスが到着したときと離れたときの両方に適用されます。
:hoverではなく、入ったり出たりする両方の方法で動作します。propertyとdurationで開始すれば、既に機能するフェードがあります。 トランスフォーム
**transform**は、要素を周囲に邪魔することなく、移動、スケール、または回転させます。アニメートする場合、スムーズに見えて隣人を押し出さないため、通常は必要です。
常に到達する3つがあります。
.card:hover {
transform: translateY(-4px); /* 4ピクセル上に移動 */
}
.icon:hover {
transform: scale(1.1); /* サイズの110%に成長 */
}
.arrow.open {
transform: rotate(90deg); /* 時計方向に4分の1回転 */
}translateは移動し、scaleはサイズを変更し、rotateは回転させます。これらのいずれかをトランジションと組み合わせると、持ち上がるカード、ポップするアイコン、またはスイングするアローが得られます。
transformは、隣人を押し出さずに要素を移動、スケール、または回転させます。覚える3つはtranslate（移動）、scale（サイズ変更）、およびrotate（回転）です。トランジションと組み合わせると、ホバー時に持ち上がるカードやポップするアイコンが得られます。 キーフレームアニメーション
トランジションは2つの状態間でアニメートします。2つ以上が必要な場合、またはモーションが繰り返す必要がある場合は、**キーフレームアニメーション**を使用します。@keyframesでステップを書き出し、animationプロパティを使用して要素にアタッチします。
ローディングスピナーは古典的な例です。永遠に回転するため、トランジションはそれを実行できません。
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite; /* spinを実行、1s/ターン、永遠に */
}fromは開始であり、toは終了です。animation行は、実行するキーフレーム、1サイクルの所要時間、速度曲線、および繰り返す回数を指定します。infiniteは永遠に止まらないことを意味します。
@keyframesでステップを書き出し、animationで実行します。スピナーは頼りになる例です。0度でfrom、360でto、infiniteでループ。animation行は、どのキーフレーム、どのくらい、曲線、および何回を設定します。 ユーザーを尊重するモーション
すべての人が画面上のモーションを望んでいるわけではありません。それを気を散らしやすい人もいて、他の人にとっては、それは本当の不快感や悪心を引き起こす可能性があります。ブラウザは、人々がシステム設定でそれを求めるようにしてくださいます。CSSは**prefers-reduced-motion**でその要求を読むことができます。
アニメーションをチェックでラップして、モーションを減らすようにお願いしていない人のためだけに実行されるようにします。
@media (prefers-reduced-motion: no-preference) {
.card {
transition: transform 0.2s;
}
}ユーザーを尊重する他の半分は抑制です。モーションは短く、微妙で、ホバーやクリックのようなリーダーがやったことに結び付けます。モーションは実際の変化に注意を向けることを支援します。それ自体のためのモーションは速く疲れます。
prefers-reduced-motionでそれを読んで、モーションを減らさないように求めている人のためだけにアニメーションを実行します。追加するモーションは短く、微妙で、リーダーがやったことに結び付けます。 アニメートするもの、そしてそれが重要な理由
後で問題を節約するルール：モーションをアニメートするとき、width、height、top、またはmarginなどのプロパティではなく、transformとopacityをアニメートします。
/* スムーズ：ブラウザはこれらを安く処理します */
.card:hover {
transform: translateY(-4px);
opacity: 0.9;
}理由は、transformとopacityが、ブラウザが最も安く周りに移動できる2つのプロパティであるため、それらの上に構築されたアニメーションは低速デバイスでもスムーズなままです。サイズまたは位置プロパティをアニメートすると、ブラウザはすべてのフレームでより多くの作業を行い、モーションはスタッター可能性があります。完全な理由に進むときに会うが、習慣は今構築する価値があります。
transformとopacityをアニメートし、width、height、top、またはmarginをアニメートすることから離れます。これら2つはブラウザが移動するのが最も安いため、モーションは低速デバイスでも滑らかなままです。完全ななぜ後で学びますが、習慣は今開始する価値があります。