CSS カスタム プロパティを使用して CSS アニメーションを再生および一時停止するにはどうすればよいですか?

SS では、アニメーションは Web サイトに視覚効果を追加する効果的な方法です。ただし、これらのアニメーションをいつ、どのように再生するかをより詳細に制御したい場合があります。ここでは、CSS カスタム プロパティを使用して CSS アニメーションを再生および一時停止する方法を見ていきます。

先に進む前に、CSS アニメーションはキーフレームを使用するか、2 つ以上の状態の間で遷移することによって作成できることを知っておく必要があります。

＃＃＃文法＃＃＃ リーリー

アニメーションに名前を付け、@keyframes キーワードを使用してアニメーションを定義します。中括弧内で、パーセンテージまたはキーワード値を使用してアニメーションのステップを定義します。

CSS でアニメーションを再生および一時停止する

CSS では、アニメーションの再生と一時停止は、アニメーション要素を制御する機能を指します。これは、Web サイトに動きと視覚的な面白さを加える方法です。

アニメーションの再生と一時停止により、これらのアニメーションをいつ、どのように再生するかを制御できます。これは、ユーザーが集中する必要があるときにアニメーションを一時停止できるようにする場合に便利です。

CSS では、animation-play-state 属性を使用して、アニメーションが実行中か一時停止かを制御できます。デフォルトでは、

animation-play-state プロパティ

は running に設定されており、ページの読み込み時にアニメーションが自動的に再生されることを意味します。ただし、CSS を使用してこのプロパティの値を変更すると、いつでもアニメーションを開始または停止できます。 CSS を使用してアニメーションの再生および一時停止効果を作成するには、次の手順に従います -

ステップ 1: アニメーションを定義する

最初のステップは、制御するアニメーションを定義することです。キーフレームを使用して簡単なアニメーションを作成できます。

ステップ 2: 再生エフェクトと一時停止エフェクトを作成する

アニメーションを定義した後、アニメーションを制御する要素を作成する必要があります。ボタン、チェックボックス、ホバー効果などの任意の HTML 要素を使用できます。

ステップ 3: CSS カスタム プロパティを定義する

次に、アニメーションの状態を保持する CSS カスタム プロパティを定義する必要があります。カスタム プロパティには任意の名前を使用できますが、この例では --animation-play-state と --animation-timingfunction を使用します。

例を通して上記の概念を理解します。

例 1

これは、簡単なスライド アニメーションを作成する方法の例です。

リーリー

例 2

これは、CSS カスタム プロパティを使用して CSS アニメーションを再生および一時停止する方法の別の例です。

リーリー ＃＃＃結論は＃＃＃

CSS カスタム プロパティを使用して CSS アニメーションを再生および一時停止すると、Web ページ上のアニメーションを制御する簡単かつ効果的な方法が提供されます。最初の例では、キーフレーム アニメーションを使用してアニメーションを定義し、animation-play-state プロパティを使用してその状態を制御します。 2 番目の例では、遷移アニメーションを使用し、カスタム プロパティの値を変更してアニメーションの状態を制御します。どちらの手法も、CSS を使用して簡単に制御できる動的なアニメーションを作成する方法を提供します。

以上がCSS カスタム プロパティを使用して CSS アニメーションを再生および一時停止するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。