【CSS】ulタグの丸が脈動するアニメーションを実装する方法

HTMLには、箇条書きリストを作成する際に使えるulタグがありますね。

ulタグでリストを作成すると、デフォルトでテキストの左側に丸がつきます。

  • 箇条書きリストサンプルテキスト1
  • 箇条書きリストサンプルテキスト2
  • 箇条書きリストサンプルテキスト3

今回の記事では、この黒丸をカスタマイズして、好きな色を指定&脈動するようなアニメーションを実装していきます!

今回の実装内容
  • 実装DEMOサンプルテキスト1
  • 実装DEMOサンプルテキスト2
  • 実装DEMOサンプルテキスト3

各テキストの左側を見てみると、丸が徐々に広がっていくアニメーションが確認できますね。

コピペ用のコード一式と、各コードの解説をしていきますので、興味がある方はぜひ参考にしてみてください。

目次

【コピペ用】ulタグの丸が脈動するアニメーションの実装コード

コピペしてすぐに使いたい方のために、コード一式を載せておきますので、自由にお使いください。

<ul class="pulse-ul">
  <li>テキストを入れてください</li>
  <li>テキストを入れてください</li>
  <li>テキストを入れてください</li>
</ul>
/* 簡易リセットCSS */
*, *::before, *::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* ulタグ */
.pulse-ul {
  list-style: none;
}

/* liタグ */
.pulse-ul li {
  position: relative;
  padding-left: 20px;
  line-height: 2;
}

/* liタグの丸の共通スタイル */
.pulse-ul li::before,
.pulse-ul li::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  left: 5px;
  top: calc(1em - 4px);
}

/* liタグの丸1のスタイル */
.pulse-ul li::before {
  background-color: #8ec2ff;
  animation: pulsate 2s infinite;
}

/* liタグの丸2のスタイル */
.pulse-ul li::after {
  background-color: #2894d0;
}

/* 脈動アニメーション */
@keyframes pulsate {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}

これらをコピペすることで、以下のようなリストを作成できます!

  • テキストを入れてください
  • テキストを入れてください
  • テキストを入れてください

次からはコードの解説をしていきますので、コードを理解したい・カスタマイズしたいという方はぜひ読み進めてください。

【解説】ulタグの丸が脈動するアニメーションの実装コードの解説

ここからは、実装コードの解説を行います。

  • HTMLでリストを作成
  • CSSでリストを装飾

この順番で説明していきますね。

HTMLでリストを作成

まずはHTMLでリストを作成していきます。

<ul class="pulse-ul">
  <li>テキストを入れてください</li>
  <li>テキストを入れてください</li>
  <li>テキストを入れてください</li>
</ul>

箇条書きリストは、ulタグ(unordered list)と、liタグ(list item)で作成することができますね。

ulタグには、CSSで装飾できるようpulse-ulというクラスを付けておきます。

これでHTMLは完了です! 

CSSでリストを装飾

CSSでは、実際に丸部分の装飾とアニメーションを指定していきます。

まずは全体のCSSをもう一度確認しましょう。

/* 簡易リセットCSS */
*, *::before, *::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* ulタグ */
.pulse-ul {
  list-style: none;
}

/* liタグ */
.pulse-ul li {
  position: relative;
  padding-left: 20px;
  line-height: 2;
}

/* liタグの丸の共通スタイル */
.pulse-ul li::before,
.pulse-ul li::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  left: 5px;
  top: calc(1em - 4px);
}

/* liタグの丸1のスタイル */
.pulse-ul li::before {
  background-color: #8ec2ff;
  animation: pulsate 2s infinite;
}

/* liタグの丸2のスタイル */
.pulse-ul li::after {
  background-color: #2894d0;
}

/* 脈動アニメーション */
@keyframes pulsate {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}

これらのコードを、

  • ulタグ
  • liタグ
  • liタグの丸部分
  • 脈動アニメーション

以上に分けて解説していきますね。

ulタグのスタイル

.pulse-ul {
  list-style: none;
}

まずはulタグにデフォルトで設定されている丸が邪魔なので、消してしまいましょう。

list-styleの値にnoneを指定することで、デフォルトの丸を消すことができます。

liタグのスタイル

.pulse-ul li {
  position: relative;
  padding-left: 20px;
  line-height: 2;
}

続いてはliタグを装飾していきます。

position: relativeは、丸の部分を絶対位置指定するために必要です。

次にpadding-leftで丸を配置するための余白を確保します。

最後に、各行の高さを調整するためにline-heightを指定しておきます。

liタグに最低限必要なスタイルは以上です!

文字サイズや文字色など、他にも文字に関して指定したい場合は、自由にカスタマイズしてください。

liタグの丸部分のスタイル

/* liタグの丸の共通スタイル */
.pulse-ul li::before,
.pulse-ul li::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  left: 5px;
  top: calc(1em - 4px);
}

/* liタグの丸1のスタイル */
.pulse-ul li::before {
  background-color: #8ec2ff;
  animation: pulsate 2s infinite;
}

/* liタグの丸2のスタイル */
.pulse-ul li::after {
  background-color: #2894d0;
}

ここからが今回のメインとなる丸部分の装飾です。

丸はそれぞれ::before::afterの擬似要素を使用して実装していきます。

  • ::before…アニメーション付きの丸
  • ::after…アニメーションなしの丸

少しコードが長いので、3つに分けて説明していきますね。

2つの丸の共通スタイル
.pulse-ul li::before,
.pulse-ul li::after {
  content: "";
  position: absolute;
  width: 8px; /* 丸の横幅 */
  height: 8px;  /* 丸の横幅 */
  border-radius: 50%;  /* 丸みをつける */
  left: 5px;
  top: calc(1em - 4px); /* 1行目のちょうど中心に丸を配置する */
}

まずは全く同じサイズの2つの丸を、同じ位置に配置します。

この時点では2つとも重なっているため、1つの円があるようにしか見えません。

この時、topプロパティで垂直方向の位置を指定するのですが、calcを使用してちょうど行の中心に丸がくるように指定します。

計算式は、以下の通りです。

(line-height ÷ 2)em – (円の縦幅 ÷ 2)px

ここでは詳しくは説明しませんが、この式の通りに計算することで丸を1行の高さの中心に配置できるようになります。

lihe-heightか丸の高さを変更する場合は、こちらの値も同時に調整してください。

これで2つの丸の共通スタイルが完成したので、次でそれぞれの丸を個別に装飾していきます。

::beforeの丸のスタイル(アニメーション付き)
.pulse-ul li::before {
  background-color: #8ec2ff;
  animation: pulsate 2s infinite;
}

まずはアニメーション付きの丸の装飾からみていきましょう。

背景色には少し薄めの青を指定し、animationには次で作成するpulsateを指定しています。

::afterの丸のスタイル(アニメーションなし)
.pulse-ul li::after {
  background-color: #2894d0;
}

続いては、2つ目の丸を装飾します。

こちらにはアニメーションを設定しないので、背景色を指定するだけで終わりですね。

脈動アニメーションを作成

最後に、丸が徐々に広がっていく脈動アニメーションを作成していきます。

@keyframes pulsate {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}

まず、丸が徐々に拡大していくアニメーションには、transformプロパティのscale()関数を使用します。

0%の時点では、scale(1)としています。これは元の大きさの1倍の大きさにするという指定なので、大きさは変わりません。

次に100%の時点では、scale(2.5)となっていますね。これは元の大きさの2.5倍にするという意味になるため、時間が経過するにつれ丸を拡大するという指定になります。

scale関数については過去に別記事でまとめていますので、以下のリンクからご覧ください。

あとは丸を徐々に透明にしていくために、opacity1から0へと変化させることで、最終的には透明になります。

丸のスタイルのパートで、animationを指定しましたね。

animation: pulsate 2s infinite;

この一行は、作成したアニメーションpulsateを2秒感間隔で無限に繰り返すという意味になります。

これで丸部分が徐々に広がっていくアニメーション付きのリストを作成することができました!

今回の実装内容
  • 実装DEMOサンプルテキスト1
  • 実装DEMOサンプルテキスト2
  • 実装DEMOサンプルテキスト3

【まとめ】ulタグの丸が脈動するアニメーションを実装する方法

CSSでulタグの丸が脈動するようなアニメーションを実装する方法を紹介しました。

色の部分はサイトカラーに合わせるとより良くなると思いますので、ぜひ使ってみてください!

今回はリストタグでしたが、ボタンタグに波紋アニメーションを実装する方法も紹介していますので、興味があればどうぞ。

Web制作に関する
記事案を募集中!

Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。
要望が多かったものは解説記事を作成します。

よかったらシェアしてね!

コメント

コメントする

目次
閉じる