CSSで円を描いて中央に文字を配置して、円の中心を起点にアニメーションで拡大させる方法

画像を使わないでCSSだけで円を描いて、次に円の中央に文字を配置して、更にその円をCSSだけで非表示から中心を起点にアニメーションで徐々に拡大表示させる方法をご紹介します。

割と簡単なコードで全部できるので、自分のメモもかねて記事にしようと思います。

1. 円を描く方法

See the Pen oNgJOox by natsuki (@natsukimemo) on CodePen.

 <div class="sample01"></div>
.sample01 {  
    width: 260px;
    height:260px;
    border-radius: 50%;/*角丸*/
    background-color:#f00;
}

CSSで正円を描くには、widthとheightに同じ値を入れて、border-radiusの値を50%以上にします。
border-radiusとは四隅の角を丸くするためのプロパティです。

widthとheight、それぞれに違う値を入れれば楕円になります。

POINT

CSSで正円を描く方法

widthとheightに同じ値を指定して、border-radius:50%;を指定する

2. 円の中央に文字を配置する方法

一行の場合

See the Pen XWJOMEw by natsuki (@natsukimemo) on CodePen.

<div class="sample02">sample02</div>
.sample02 {  
   width:260px;
   height:260px;
   border-radius:50%;
   background-color:#f00;
 
   font-size:36px;
   color:#fff; 
   line-height:260px; /*縦中央*/
   text-align:center; /*横中央*/
}

line-heightheightと同じ値を指定します(CSS9行目)。これにより、縦中央に配置されます。
更に、text-align:center;を指定することで横中央に配置されます。(CSS10行目)

POINT

円の中央に文字を配置する方法(一行の場合)

1. line-heightにheightと同じ値を指定する
2. text-align:center;を指定する

複数行の場合

方法はいろいろありますが、flexboxを使った方法が簡単なのでご紹介します。

 

See the Pen oNgmZyx by natsuki (@natsukimemo) on CodePen.

<div class="sample03">sample<br>03</div>
.sample03 {  
   width: 260px;
   height:260px;
   border-radius: 50%;
   background-color:#f00;
  
   font-size:36px;
   color:#fff;
   display:flex;
   justify-content:center; /*横中央*/
   align-items:center; /*縦中央*/
   text-align:center; /*行揃えを中央*/
}

line-heightは使いません。
CSS9行目から12行目がテキストを円の中央に配置しているCSSです。
それ以外はsample02と同じです。

CSS9行目 display:flex;を指定して、
CSS10行目 justify-content:center;で横位置を中央に。
CSS11行目 align-items:center;で縦位置を中央にしています。
CSS12行目 text-align:center;でテキストの行揃えを中央にします。

flexboxは、簡単なコードでレイアウトを組めるCSS3から導入されたレイアウトモジュールです。

スポンサーリンク

3. 非表示から円の中心を起点に拡大表示させる方法

 

See the Pen mdyvWGm by natsuki (@natsukimemo) on CodePen.

sample04は下記の条件で表示されています。

表示条件

  1. 非表示から
  2. 円の中心を起点に
  3. 徐々にアニメーションで拡大表示させる

1の「非表示から」と2の「円の中心を起点に」には、transformプロパティの関数scaleを使います。
3の「徐々にアニメーションで拡大表示させる」には、CSSのキーフレームアニメーションを使います。

transformプロパティの関数scaleについて

transformプロパティは、移動、回転、伸縮、傾斜の効果を2次元、3次元で指定できるプロパティです。
関数scaleは、要素の中心を起点に2次元での拡大・縮小を実現します。

意味
scale(x,y)X軸とy軸を別々に変倍するscale(0.5,2)
scale(数値)X軸とy軸を同じ値で変倍するscale(2)

scale(1)が元々の大きさを表し、1より大きければ拡大、1より小さければ縮小することになります。

CSSのキーフレームアニメーションについて

CSSのキーフレームアニメーションは、要素にキーフレームを適用することで要素を動的に変化させることができるCSSです。

sample04で必要なキーフレームアニメーションについては後述します。
更に詳しくは別記事にしています。 最後にリンクを貼っておりますのでよろしければご覧ください。

下記がsample04のコードです。
CSS12行目までは前述した、sample03のコードと同じです。
14行目以降が、sample04の表示条件を満たすのに必要なコードとなります。

 <div class="sample04">sample<br>04</div>
.sample04 {  
    width: 260px;
    height:260px;
    border-radius: 50%;
    background-color:#f00;

    font-size:36px;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
  
    transform: scale(0);
    animation-name:sample04;
    animation-duration:4s;
    animation-fill-mode:forwards;
    animation-iteration-count:infinite;
}
@keyframes sample04{
  0%{
    transform: scale(0);    
  }
  100%{
    transform: scale(1);    
  }
}
14行目 transform: scale(0);

scale(0)を指定して要素を非表示にしています。

関数scaleはwidthやheightで指定した値を1として拡大縮小します。
上記CSSの場合、width:260px;(CSS2行目)とheight:260px;(3行目)が1となります。

1より大きい数値ならば拡大、1より小さい数値なら縮小されます。
scale(0)は、1より小さいので縮小、それも0なので最大限に縮小されて非表示ということです。

このCSSを指定する理由は、ページがロードされた時から要素を非表示にするためです。
これを指定しておかないと、ページが読み込まれてアニメーションが始まるまで、一時的に要素が表示されてしまいます。

このコードにより表示条件1の「非表示から」を実現しています。

CSSキーフレームアニメーションの設定

15行目以降キーフレームアニメーションの設定になります。

キーフレームアニメーションは、

animationプロパティ」と
@keyframes(キーフレーム)

のふたつの要素で構成されています。

CSS15~18行目がanimationプロパティ、20行目以降が@keyframes(キーフレーム)です。

15行目animation-name:sample04;と
20行目@keyframes sample04{

animation-nameプロパティは、アニメーションに名前を付けるプロパティです。
@keyframesに半角スペースを空けて同じ名前を記述することで互いが関連付けられます。
この場合、sample04と名付けています。

animationに名前を付ける

animation-name: 〇〇〇;
@keyframes 〇〇〇{ }

〇〇〇は、同じ名前であること

また、@keyframesは下記の形で使い、「時間の経過とそこでの状態を指定」します。

@keyframesの書き方

@keyframes 名前 {
0% または from { 0%の時の状態を指定 }
100% または to { 100%の時の状態を指定 }
}

0%から100%に至る過程がアニメーションされます。

それでは、以上をふまえて一行ずつ見ていきましょう。

16行目animation-duration:4s;

アニメーションが行われている時間を指定するプロパティです。
4秒間に指定しています。

17行目 animation-fill-mode: forwards;

animation-fill-modeは、アニメーションの終了時の状態を指定できるプロパティです。
値の「forwards」は、アニメーションの再生後は、キーフレーム100%の状態を維持せよ、という意味です。
このアニメーションの場合、25行目で指定した状態を維持せよ、ということです。

18行目 animation-iteration-count: infinite;

アニメーションの繰り返し回数を指定するプロパティです。
「infinite」は、無限に繰り返す、という意味です。

21行目0%{
22行目 transform: scale(0);

キーフレーム0%(開始)の時、transform: scale(0);で非表示にしています。

24行目100%{
25行目 transform: scale(1);

キーフレーム100%(終了)の時、transform: scale(1);を指定することでwidthやheightで指定した元々の大きさで表示されます。

キーフレームアニメーションで関数scaleを用いることで、表示条件2の「円の中心を起点に」と、表示条件3の「徐々にアニメーションで拡大表示する」が実現できました。

スポンサーリンク

5.参考

関数scaleではなくキーフレームにwidthやheightを指定してみると下のようなアニメーションもできたりします。

See the Pen ZEYwemZ by natsuki (@natsukimemo) on CodePen.

See the Pen vYEPBVR by natsuki (@natsukimemo) on CodePen.

6.まとめ

少し長くなりましたが、自分へのメモも兼ねて記事にしてみました。
CSSだけで全部できるので、WEBデザイナーやコーダーにもとっつきやすいですよね。

この記事がお役にたてると幸いです。

CSSのキーフレームアニメーションについては、下記の記事もどうぞ。

スポンサーリンク