DevTools のヒント: CSS アニメーションを検査して変更する方法
bookmark_borderbookmark
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
Chrome DevTools の [アニメーション] タブは、CSS アニメーションの速度を遅くしたり、再生したり、タイミングを調整したり、結果をすぐに確認したりできる強力なツールです。
[アニメーション] タブを開くと、アニメーションが自動的に記録され、便利にグループ化されます。また、次のことができます。
- アニメーションを再生したり、スロー再生したりして、詳しく確認できます。
- CSS 値を手動で推測して設定するのではなく、タイムライン上の点をドラッグして、時間、タイミング、遅延を調整できます。
また、[要素] > [スタイル] ペインの [イージング エディタ] で、イージングのタイミングを編集したり、カスタムの cubic-bezier
カーブ値を設定したりできます。詳しくは、Easing Editor でアニメーションと遷移のタイミングを編集するをご覧ください。
実践的な学習を希望される場合は、CSS アニメーション効果を検査して変更するガイドをご覧ください。
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2022-08-11 UTC。
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2022-08-11 UTC。"],[],[]]