transformとopacityでコンポジタ上でアニメーションさせ、@keyframesを構造化し、ユーザーのモーション設定を尊重しましょう。
このレッスンを Kodokon で開く何をアニメーションさせるか選ぶ前に、レンダリングパイプラインを思い出しましょう。レイアウト（ジオメトリ）、ペイント（ピクセル）、コンポジット（GPU上でのレイヤーの組み立て）です。widthやtopをアニメーションさせると、フレームごとにレイアウトが発生し、しばしばペイントがそれに続きます。これは60fpsを下回るカクつき（jank）の元です。transformとopacityは最初の2つの段階を経ずに、コンポジタが直接処理します。プロの鉄則は、可能な限りこの2つのプロパティだけをアニメーションさせ、残りはシミュレートすることです（topの代わりにtranslate、widthの代わりにscale）。
.button {
transform: translateY(0);
transition:
transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
opacity 0.15s ease-out;
}
.button:hover {
transform: translateY(-2px);
}
.button:active {
transform: translateY(0) scale(0.97);
}トランジションだけでは足りなくなったら（中間ステップ、ループ、自動開始）、@keyframesに移りましょう。きれいなアニメーションと視覚的なバグを分ける2つの設定があります。animation-fill-modeは開始前の状態（backwardsはディレイの間に最初のキーフレームを適用します）と終了後の状態（forwardsは最後のキーフレームで固定します）を制御し、bothはその両方を組み合わせます。また、タイミング関数は総時間全体にではなく、各キーフレームのペアの間に適用されることにも注意してください。キーフレームの中で再定義できます。
@keyframes slide-in {
from {
transform: translateX(-100%);
opacity: 0;
}
70% {
transform: translateX(8px);
opacity: 1;
}
to {
transform: translateX(0);
}
}
.toast {
animation: slide-in 0.35s ease-out both;
}知っておくべき補完的なツールが2つあります。will-change: transformはアニメーションの前に要素を専用のレイヤーへ昇格させ、遅れたラスタ化を避けます。ただし各レイヤーはGPUメモリを消費するため、アニメーションの直前に適用してその後で外すようにし、決して何十もの要素に恒久的なスタイルとして付けないでください。steps(n)は連続的な補間を離散的なジャンプに置き換えます。スプライト、タイプライター風のカーソル、時計などに不可欠です。
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}left: 100pxよりtransform: translateX(100px)が好ましいのですか？transformは古いブラウザでのサポートがより良いからtransformはフレームごとにレイアウトを再計算せず、コンポジタが処理するからleftは絶対配置された要素でしか機能しないが、transformはどこでも機能するからtransformはleftと違って負の値を受け付けるからanimation-fill-mode: bothは何をしますか？will-changeの正しい使い方はどれですか？*に対してグローバルに適用するtransform: translateZ(0)と組み合わせるtransitionの代わりに使う