CSSでブロック要素をボールのように丸くしてバウンドさせる方法

この記事は約444秒で読めます。

どうも!こうすけです!

今日はブロック要素をボールのようにバウンドさせてみたので、それを紹介したいと思います。

以下のような感じでバウンドします。


1. 仕様

ブロック要素をボールのように丸くさせバウンドさせるには以下のような手順が必要です。

  • 丸くする
  • バウンドさせる

1.1. 丸くする

css のborder-radiusプロパティを使用し、ブロック要素を丸くします。
丸くするサイズを縦や横サイズの半分のサイズとなるように指定するとブロック要素が丸くなります

width,height共に300pxの場合は以下のように指定します。

border-radius: 150px;

相対的に指定したい場合は、ブロック要素のサイズを100%、border-radiusを50%のように指定するといいです。

1.2. バウンドさせる

ブロック要素を丸くしたらcssのanimateプロパティを使用してバウンドさせます。
動画のようにバウンドさせたい場合は、ブロック要素の擬似クラス:hoverにanimationプロパティを指定します。

具体的には以下のように記載します。

.block:hover{
  animation: anime .3s ease infinite alternate;
}

/*記事の一覧をバウンドさせるアニメーション用のキーフレイム*/
@keyframes anime{
  0% {transform: translateY(0px);}
  100% {transform: translateY(-10px);}
}

これでブロック要素がバウンドします。

1.3. 実際にはこんな感じ

実際に記述するとこんな感じで記述しています。

.post_list_block{
  margin-left: 4%;
  margin-right: 4%;
  margin-top: 15px;
  margin-bottom: 15px;
  width: 300px;
  height: 300px;
  display: inline-block;
  overflow: hidden;
  padding: 0;
  border-radius: 150px;
  border: solid 1px #FFFF00;
  background-color: #fff; /*画像をズームした際に背景画像を透過させないようにするため。*/
  position: relative;
  z-index: 1;
}

/*記事一覧をマウスオーバーした際に記事をバウンドさせる。*/
.post_list_block:hover{
  animation: key1 .3s ease infinite alternate;
}

/*記事の一覧をバウンドさせるアニメーション用のキーフレイム*/
@keyframes key1{
  0% {transform: translateY(0px);}
  100% {transform: translateY(-10px);}
}

2. animationプロパティ詳細

animationプロパティにて複数の内容が指定されていますが、何が指定されているか不安だという方に詳細を記載しておきます。

2.1. anime

animationで指定されているanimeはanimationプロパティで必要なアニメーションのキーフレイムです。
これは、アニメーションの初めから終わりまでどういう状態にさせたいか細かく設定するためのものです。
記述した内容を例にとると,transformプロパティは要素を移動させるプロパティで、開始時(0%)は縦軸に0px移動(結果移動しない)という指定をしています。
終了時(100%)には縦軸に-10px(上に10px)移動させるという指定をしています。

2.2. .3s

これはアニメーションが完了するまでの完了時間を指定しています。長い時間を指定すれば、ゆっくりアニメーションが行われますし、短い時間を指定すれば早くアニメーションが行われます。

2.3. ease

 これはアニメーションの動き方を指定しています。

2.4. infinite

これは、アニメーションの繰り返し回数を指定しています。infiniteは無限に繰り返す指定ということです。

2.5. alternate

これは奇数回数では普通方向にアニメーションを動かす。偶数回数では、逆方向にアニメーションを動かすという指定になります。
今回の記述でいうと、上に移動させたら次は上から下に移動させるということになります。
この指定が無い場合だと、アニメーションが完了した際に、いきなりボールが下に移動するという動きになってしまい、ボールの動きとしてはおかしい動きになってしまいます。
以下のような動きになります。

3. 最後に

このようにブロック要素をボールのようにしてバウンドさせてみました。何か利用できそうであればぜひ活用してみてください。

この記事がいい!!と思ったらいいねツイートよろしく!!

 

作成者: kosuke

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です