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

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 ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  Vue ルーティング遅延読み込みの詳細

>>:  HTML tbody の使用

推薦する

MySQL の主キーがクエリを高速化するために数値を使用するか UUID を使用するかについての簡単な分析

実際の開発では、MySQL の主キーは重複できず、主キーが自動的にインクリメントされることがあります...

ページ要素の絶対位置と相対位置に関するある程度の理解

今日から、定期的にちょっとした豆知識を整理していきます。簡単なものもあるかもしれませんが、どれも役に...

衝突検出を実装するためのjs

この記事の例では、衝突検出を実装するためのjsの具体的なコードを参考までに共有しています。具体的な内...

JavaScript クラス配列の詳細な理解

js 配列はどこでも使用されているため、おそらく誰もがよく知っているでしょうが、配列クラス (疑似配...

SQL と MySQL のステートメント実行順序の分析

今日、問題が発生しました: MySQL の insert into、update、delete ステ...

Linux NFSメカニズムの動作原理と例の分析

NFS とは何ですか?ネットワークファイルシステムネットワーク上でファイルを保存および整理するための...

CSS3は、欠けた角の長方形、折り畳まれた角の長方形、欠けた角の境界線を実装しています。

序文数日前、偶然、コーナーの四角形が欠落している機能に遭遇しました。最初に頭に浮かんだのは、必要な場...

innodb_flush_method 値メソッド (例の説明)

innodb_flush_methodのいくつかの典型的な値 fsync: InnoDB は fs...

Nginx を使用してフロントエンドのクロスドメイン問題を解決する方法

序文Vue アプリケーションなどの静的ページを開発する場合、クロスドメインになる可能性のあるインター...

Vue は動的な円形のパーセンテージ進捗バーを実装します

最近、小さなプログラムを開発しているときに、次の設計図のような円形のパーセンテージ進捗状況バーを実装...

DockerコンテナのライフサイクルアーキテクチャとVMとの違いについて詳しく説明します。

コンテナのライフサイクルコンテナランタイムのライフサイクルコンテナは、分離特性を持つプロセスのセット...

最も完全な 50 の MySQL データベース クエリ演習

このデータベース クエリ ステートメントは、インターネット上の 50 個のデータベース クエリ練習問...

CSS ピクセルとさまざまなモバイル画面適応の問題に対する解決策

ピクセル解決通常、モニター解像度と呼ばれるものは、実際にはモニターの物理的な解像度ではなく、デスクト...

2012年のベストWebデザイン作品レビュー[パート1]

新年の初めに、友人の健康と2013年が素晴らしい年となることを心からお祈りいたします。この記事では、...

Dockerは起動されていないコンテナの設定情報を変更します

私が初めてdockerを使用したときは、dockerfileやdocker-composeを使用して...