Chrome DevTools：Web アニメーションと console_html/css_WEB-ITnose

この記事はTTTシリーズの5回目です。今日は4つの楽しいことを紹介したいと思います。

1. Cubic Bezier ビジュアル エディター

CSS3 トランジションでは、transition-timing-function を使用してトランジションの速度効果を設定できます。 transition-timing-function は、linear、ease、ease-in、ease-out、ease-in out の 5 つの事前定義値を提供します。これらの事前定義された効果は、実際には 3 次ベジェ関数のさまざまなパラメーターの効果です。それらの対応関係は次のとおりです。

画像コンテンツは w3school から取得されます

ベジェ曲線 (ベジェ曲線) は、コンピューター グラフィックスにおける重要な曲線パラメータです。この種類の曲線は、Adobe Illustrator などのベクター エディターで見ることができ、アニメーションでは動きの効果を記述するために使用されます。これは 4 つのパラメータで構成されています:

これら 4 つのパラメータを使用すると、パーソナライズされた動きの効果をカスタマイズできますが、これらのパラメータは直感的ではありません。以前は、CSS 専門家の Lea Verou が作成した Web サイト cubic-bezier.com にアクセスして、必要な効果を視覚的に見つけて、パラメーターをアプリケーションにコピーできました。 Chrome がこの機能を提供したことで、アプリケーション内の実際の要素を DevTools で直接視覚的に編集し、実際の効果をリアルタイムでプレビューできるようになりました。

使用方法は非常に簡単です。要素検査 (検査) で CSS トランジションまたはトランジション タイミング関数を適用した要素を見つけます。要素と Cubic Bezier ビジュアル エディターがポップアップ表示されます。試してみてください! (cubic-bezier.com ページで現在の ID の要素を見つけて試してみることができます。)

2. Web アニメーションの再生

上記の Cubic Bezier エディターに比べて、Chrome では Web アニメーションのデバッグがさらにサポートされています。たとえば、この 3D NES コントローラ アニメーションの例を開き、要素検査を通じて