CSSアニメーションで上から下に動き続ける円を作る方法

こんにちは。

ゆうや（@yuyaphotograph）です！

本記事では、CSSアニメーションで上から下に動き続ける円を作る方法をご紹介します。

見てもらった方が絶対早いと思うのでイメージ図をご覧ください笑

↓↓↓例えばこういうボタンです。

可愛らしいボタンですよね

モダンなWebサイトで時々見かけますね笑

それでは作り方を見ていきましょう！

MEMO

正しい呼び方を知っていたらぜひ教えていただきたいです笑ほんとになんて呼んでいいか分かりませんもん。

CSSアニメーションで上から下に動き続ける円を作ろう！
- 実装のポイント
- サンプルコード
まとめ

CSSアニメーションで上から下に動き続ける円を作ろう！

完成イメージは冒頭で共有しましたので、さっそく実装のポイントを紹介します。

実装のポイント

今回の実装のポイントは、

白い小さな円は疑似要素beforeで表現する
それを絶対配置で白枠の中央に配置する
CSSアニメーションでtransformプロパティのtranslateを使用して円のY軸方向の表示位置を操作する

となります。

1つずつソースコードとともに確認していきましょう。

白い小さな円を擬似要素で表現する

index.html

<div class="Inner">
  <a href="#">
    <span class="hoge"></span>
  </a>
</div>

キーフレームアニメーションの名前はよしなに変更してください。

index.css

.Inner{
  position: relative;
  height: 100vh;
  background: #000;
}
.hoge{
  position: absolute;
  left: 50%;
  bottom: 80px;
  width: 30px;
  height: 50px;
  margin-left: -15px;
  border: 2px solid #fff;
  border-radius: 50px;
  box-sizing: border-box;
}
.hoge:before{
  position: absolute;
  top: 10px;
  left: 50%;
  content: '';
  margin-left: -3px;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 100%;
  -webkit-animation: animation 2s infinite;
  animation: animation 2s infinite;
  box-sizing: border-box;
}

animationプロパティにinfiniteを指定することで、アニメーションの再生が無限になります。
円の色を変更したい場合は疑似要素のbackgroundプロパティの値を変更してください。
円のサイズを変更したい場合はwidthとheightを変更してください。

CSSアニメーションで円のY軸方向の表示位置を操作する

index.css

@-webkit-keyframes animation {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes animation {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

円は初期状態で、10pxの位置に表示していますので、アニメーションで2秒間かけて20pxの位置に動かすことで上下の動作を表現しています。

サンプルコード

CodePenでサンプルを作ったのでご覧になって下さいまし(^o^)

↓↓↓

See the Pen
mdyqWEM by 石森裕也 (@yuyaphotograph)
on CodePen.

まとめ

以上、CSSアニメーションで上から下に動き続ける円を作る方法をご紹介しました。

トップページをほんのりオシャレにしたい時に使用を検討してみくださいまし(^o^)

CSSアニメーションもっと知りたい！楽しいですね！！

最後までご高覧いただきありがとうございました！