HTML&CSSでほわほわした円のアニメーションを作成する方法

その他
2021.06.15

この記事にはHTML&CSSだけで「ぼかした円」を作成する方法と、その円が「濃くなったり薄くなったりする」アニメーションを作成する方法が書いてあります
検索でうまく見つけることができなかったので、記事にしました

今回作成するもの

See the Pen vYxVrQg by jomori (@jomori) on CodePen.

使用するコード

HTMLタグ
・div

CSSプロパティ
・animation
・width
・height
・border-radius
・background
・opacity

＠-規則
・@keyframes

スポンサーリンク

コード解説

HTMLの記述

<div class="circle"></div>

HTMLはこれだけです
解説不要かと思いますが、カラのdivタグにクラス名circleをつけました
ちなみに省略記法（エメット）では「div.circle」と入力すると下の画像のように簡単に入力できます

CSSの記述

.circle{

  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(#4affcf 40%, #fff 70%);

  animation: fluffy 5s ease 1s infinite normal both;
}
@keyframes fluffy{
  0%{
    opacity: 0.2;
  }
  50%{
    opacity: 0.9;
  }
  100%{
    opacity: 0.2;
  }
}

はじめにwidthとheightでカラの正方形を作ります
今回は埋め込みに最適だった150pxにしています

次にborder-radiusで角を丸くします
50％にすると円になります

次にbackgroundで円に色をつけます
カラーコードを記述して色を指定します

radial-gradient()を使うことにより円にグラデーションをかけることができます
()内の　#4affcf 40%, #fff 70%　記述の意味は簡単に言うと
開始色が#4affcf
終了色が#fff（ホワイト）
中心から見て40％～グラデーションを開始、一番遠い辺70％が終端、100％は一番遠い頂点という意味だそうです

イメージ図

%指定をしない場合は以下のようになります

説明が不十分なところがあると思いますので、不足分はMDNなどを見ていただきたいと思います
参考サイト
MDN
CSS3リファレンス
ics.media
WEBMANABU

最後にアニメーションを記述します
【animation: fluffy 5s ease 1s infinite normal both;】はショートハンド（簡略化）で記述しています
内容は左から順番に

それぞれを詳しく見ていきます

animation-nameプロパティ

アニメーションの名前は好きに決めて大丈夫です
今回のfulffyはGoogle翻訳で「ふわふわ」という意味です

animation-durationプロパティ

ms(ミリ秒)またはs(秒)で指定、初期値はゼロ秒、今回のアニメーションは濃くなる時間が2.5秒、薄くなるのが2.5秒のトータル5秒間の設定です

animation-timing-functionプロパティ

変化の度合いを指定できる値は次の９つです

値説明
ease初期値、開始時と終了時は緩やかに変化
ease-in開始時は緩やかに変化し、終了に近づくと早く変化
ease-out開始時は早く変化し、終了に近づくと穏やかに変化
ease-in-out開始時と終了時はすごく緩やかに変化
linear開始から終了まで一定に変化
step-start開始時に最終の状態になる
step-end終了時に最終の状態になる
steps(整数,startまたはend)指定した整数の段階で変化、第2引数にはstartまたはendを指定できる。startを指定すると、アニメーション開始時から変化する、endを指定するとその逆
cubic-bezier(x軸の値,y軸の値,x軸の値,y軸の値)変化の度合いをベジェ曲線により任意で指定

参考にしたサイト２つ
Qiitaさんのアニメーション記事
㈱アーティスさんのアニメーション記事
それぞれの動きをわかりやすく解説してくれています

animation-delayプロパティ

ms(ミリ秒)またはs(秒)で指定、初期値はゼロ秒、今回は1秒後にアニメーションがかいしする設定です

animation-iteration-countプロパティ

値は正の整数で指定できます、初期値は1、無限はinfinite

animation-directionプロパティ

値説明
normal初期値、毎回、指定した通り(順方向)のアニメーションが再生される
reverse毎回、逆方向からアニメーションが再生される
alternate順方向、逆方向のアニメーションを交互に繰り返す
alternate-reverse逆方向、順方向のアニメーションを交互に繰り返す

animation-fill-modeプロパティ

値説明
noneアニメーションで指定したスタイルは、アニメーションの開始前、終了後には適用されない
forwardsアニメーション終了時のスタイルがアニメーション終了後にも適用される
backwardsアニメーション開始時のスタイルがアニメーション開始時にも適用される
bothforwardsとbackwardsの両方が適用される

今回は指定していませんが、animation-play-statetという再生・停止を指定できるプロパティもあります
初期値はrunning
running・・・アニメーションが実行される
paused・・・アニメーションが停止される


【animation: fluffy 5s ease 1s infinite normal both;】と【@keyframes fluffy{0%{opacity:0.2;}50%{opacity:0.9;}100%{opacity:0.2;}}】はセットで記述しないと動きません
その@keyframesですが、アニメーションの開始から終了するまでの動きを指定できるCSSです
opacityは不透明度を指定するプロパティです
0から1までの数値を記述して、0だと透明になり、1はその逆です

コメント

タイトルとURLをコピーしました