CSS3 は、跳ねるボール効果を実現する Web アニメーションを作成します。

基本的な準備

この実装には、クラス名が ball である単純な div が必要です。

HTMLコード:

<div class="ボール"></div>

Flexbox レイアウトを使用して、ボールをページの中央に配置します。サイズは 100px × 100px、背景色はオレンジです。

CSSコード:

体 {
display: flex; /* Flexレイアウトを使用する */
justify-content: center; /* 水平方向の中央 */
}
。ボール {
幅: 100ピクセル;
高さ: 100px;
border-radius: 50%; /* 正方形を円に変更します */
background-color: #FF5722; /* 色をオレンジ色に設定します */
}

キーフレームの作成

キーフレームは CSS アニメーションで使用されるため、アニメーションを完全に制御できます。キーフレーム スタイルの作成は非常に簡単です。キーワード @keyframes に続けてアニメーションの名前を使用します。

CSSコード:

@keyframes アニメーション名 {
/* コード */
}

この例では、キーフレームに「bounce」という名前を付けます。 Keyframe では、from キーワードと to キーワードを使用して、アニメーションの開始点と終了点の CSS スタイルを指定します。

CSSコード:

@keyframes バウンス {
{ /* 開始 */ } から
{ /* 終了 */ } まで
}

シンプルですよね？ 最後のステップとして、開始点と終了点に CSS スタイルを追加します。バウンド効果を作成するには、ボールの位置を変更するだけです。 transform を使用すると、特定の要素の座標を変更できます。最終的なキーフレームは次のとおりです。

CSSコード:

@keyframes バウンス {
{ transform: translate3d(0, 0, 0); } から
を { transform: translate3d(0, 200px, 0); } に変更します。
}

transform を使用して、ボールを 3 次元軸に沿って移動します。translate3D 関数には、(x、y、z) という 3 つの入力パラメータが必要です。 ボールを上下に跳ねさせたいので、y 軸に沿って移動させるだけで済みます。したがって、アニメーションの終了点（つまり、to のスタイル）の y 値は 200px になります。

キーフレームを実行

@keyframe が作成されたので、実際に使用してみましょう。 .ball{} css に戻り、次のコード行を追加します。

CSSコード:

。ボール {
/* ... */
アニメーション: バウンス 0.5 秒;
アニメーション方向: 代替;
アニメーションの反復回数: 無限;
}

次の 3 行のコードについて説明します。

キーフレーム ルールを使用して、ボール要素にバウンドするように指示します。 アニメーションが完了するまでの時間を 0.5 秒に設定します。

完了後は、アニメーションが逆方向（反転）に実行されます。

アニメーションを無制限に実行します。

これまでのところ素晴らしいです。 これは私たちが望んでいるものに近いですが、まだ完璧ではありません。

弾むボールのようには見えません。これは、アニメーションの速度カーブを設定していないため、デフォルトでイーズに設定されるからです。つまり、アニメーションはゆっくりと始まり、途中でスピードが上がり、終わり近くで再びスピードが下がります。残念ながら、これはバウンドするボールには理想的ではありません。幸いなことに、この速度曲線を Math を使用してカスタマイズできます。

あまり詳しく説明する必要はありませんが、ベジェ曲線を使用してカスタムアニメーションのタイミングを指定できます。添付のコードは次のとおりです。

CSSコード:

。ボール {
/* ... */
アニメーション: バウンス 0.5 秒 cubic-bezier(.5,0.05,1,.5);
}

もちろん、これは CSS アニメーションとキーフレームを使用して作成された最も単純なアニメーション効果です。

要約する

上記は、CSS3 を使用して Web アニメーションを作成し、バウンドするボール効果を実現する方法について紹介したものです。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。