CSSでボールが跳ねるアニメーション効果を実現するにはどうすればよいですか?跳ねるボールアニメーションの実装例

CSS でボールが跳ねるアニメーション効果を実現するにはどうすればよいですか?この記事では、CSS でボールが跳ねるアニメーション効果を実現する方法をコード例を通して紹介します。困っている友人は参考にしていただければ幸いです。

1. アニメーション キーフレームを定義します

このアニメーションでは、2 つのキーフレームを使用します。1 つはボールを一定の速度で水平に移動し、もう 1 つはほぼ放物線を適用します。垂直に跳ねる動き。水平方向と垂直方向の移動を 1 つのキーフレームに組み合わせることができますが、これは目的の効果には機能しません。

水平方向の移動は、次のキーフレームを使用して簡単に実現できます。

 @-webkit-keyframes travel {
    from {              }
    to   { left: 640px; }
  }
  @keyframes travel {
    from {              }
    to   { left: 640px; }
  }

このキーフレームは、指定された名前「travel」を使用して後で参照され、線形 (変換タイミング関数) を使用して、キーフレームの場合、関数は反復ごとに方向を変えます。

垂直方向のバウンス アニメーションでは、イーズインおよびフェードアウトのタイミング機能を利用して重力場の効果をシミュレートします:

 @-webkit-keyframes bounce {
    from, to  {
      bottom: 0;
      -webkit-animation-timing-function: ease-out;
    }
    50% {
      bottom: 220px;
      -webkit-animation-timing-function: ease-in;
    }
  }
  @keyframes bounce {
    from, to  {
      botttom: 0;
      animation-timing-function: ease-out;
    }
    50% {
      bottom: 220px;
      animation-timing-function: ease-in;
    }
  }

このキーフレームは名前が付けられています。今後の参考のために「バウンス」します。

これら 2 つのキーフレームを組み合わせると、「ボール」が水平に 640 ピクセル、垂直に 220 ピクセル移動します。もちろん、これらの値は「ステージ」のサイズに合わせて調整する必要があります。

2. アニメーションのステージを設定します。

いつものように、最初にアニメーションを実行する「ステージ」を設定します。この場合、660 x 240 ピクセルの単純な DIV です。幅を 100% にすれば良いのですが、正確なピクセル幅が分からない場合にいくつかの要素を配置するのは困難です。

#stage {
    position: relative;
    margin: 1em auto;
    width: 660px;
    height: 240px;
    border: 2px solid #666;
    background: #cff;
  }

この段階では、水平方向に前後に移動する DIV 要素を設定し、その中に上下に跳ね返る「ボール」を表す DIV を設定します。 「ボール」のサイズは 20 x 20 ピクセルで、角は丸いです。

3. ボールの動きを設定します。

いくつかの簡単な HTML タグが完成しました:

#traveler {
    position: absolute;
    width: 20px;
    height: 240px;
    -webkit-animation-name: travel;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-duration: 4.8s;
    animation-name: travel;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 4.8s;
  }
  #bouncer {
    position: absolute;
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 10px;
    -webkit-animation-name: bounce;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 4.2s;
    animation-name: bounce;
    animation-iteration-count: infinite;
    animation-duration: 4.2s;
  }

ブラウザがサポートしている場合、アニメーションが自動的に起動します。次のボックス (または #stage) で無限に続行します:

## 追加の要素を追加しましたアニメーションの x コンポーネントと y コンポーネントを強調表示するためのいくつかのスタイル。JavaScript は必要ありません。コードの残りの部分は、示されているとおりです。

CSS: bounce-animation.css (https://www.the-art-of-web.com/bounce-animation.css)

これで完了です。

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。

以上がCSSでボールが跳ねるアニメーション効果を実現するにはどうすればよいですか?跳ねるボールアニメーションの実装例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。