HTML・CSSでぼやけた画像が徐々にクリアになるアニメーションをつくる

先日リニューアルした、自己紹介サイト「たきつぼ」のトップページのメインビジュアルに用いているのですが、最初ぼやけていた画像が、徐々にクリアになるアニメーションをCSSだけで作りました。

完成系（デモ）はこちら

サンプルソースコードはこちら

HTML

<p class="img_wrap">
  <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/t/taki_blog/20240120/20240120140929.jpg" alt="ぼやけた画像が徐々にクリアになるアニメーションのデモ" width="800" height="420" loading="lazy" itemprop="image" />
</p>

CSS

.img_wrap{
  position:relative;
}
.img_wrap::after{
  content:"";
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  backdrop-filter:blur(8px);
  animation:blur 1s ease-in-out forwards;
}
@keyframes blur{
  0%{backdrop-filter:blur(8px);}
  100%{backdrop-filter:none;}
}

HTML・CSSともに、あくまでもサンプルのため、利用される際はclass名や画像URL・属性などをご自身で変更ください。

ソースコードの解説

HTML

<p class="img_wrap">
  <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/t/taki_blog/20240120/20240120140929.jpg" alt="ぼやけた画像が徐々にクリアになるアニメーションのデモ" width="800" height="420" loading="lazy" itemprop="image" />
</p>

HTMLはシンプルに、imgタグをpタグで囲んでいるだけで、余分な空タグなどは使用していません。空タグはあまり好きじゃないので（個人的な理由です）。

上項でも記載しましたが、あくまでもサンプルなので、実際に使用する際は画像URLなどを置き換えてください。

CSS

.img_wrap{
  position:relative;
}
.img_wrap::after{
  content:"";
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  backdrop-filter:blur(8px);
  animation:blur 1s ease-in-out forwards;
}
@keyframes blur{
  0%{backdrop-filter:blur(8px);}
  100%{backdrop-filter:none;}
}

CSSの方もさほど難しいことはしていません。

疑似要素を使用するため、imgタグをラップしているpタグに「position:relative;」を指定し、画像に透明な疑似要素を重ねています。

そして、その疑似要素に「backdrop-filter:blur (8px);」を指定してぼかしをかけ、そのぼかしをCSSアニメーションで制御しています。

ぼかしのかけ具合を変えたい方は「backdrop-filter:blur (8px);」の「8px」を大きくすればよりぼかしが強くなり、小さくすればぼかしが弱くなります。

アニメーション時間を変えたい方は、「blur 1s ease-in-out forwards;」の1sを大きくすればアニメーション時間が長くなり、小さくすれば逆に短くなります。

画像をクリックできるようにしたい場合

これまでに解説した方法では、画像の上に透明な疑似要素を重ねているので、画像がクリックできなくなります。

そのため、たとえば画像をクリックするとポップアップで画像が拡大表示される、画像クリックでページが遷移するなどしたい場合は、疑似要素に「pointer-events:none;」を追加します。

.img_wrap{
  position:relative;
}
.img_wrap::after{
  content:"";
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  backdrop-filter:blur(8px);
  animation:blur 1s ease-in-out forwards;
  pointer-events:none; /* 追加 */
}
@keyframes blur{
  0%{backdrop-filter:blur(8px);}
  100%{backdrop-filter:none;}
}

なぜ「filter:blur」ではなく「backdrop-filter:blur」を使うか

単純に画像をぼかすだけならば、これまでに記載したように、わざわざ疑似要素を作製して「backdrop-filter:blur」ではなくても「filter:blur」で良いはずです。

しかし「backdrop-filter:blur」を用いたのにはしっかりと理由があり、それは下記をご覧いただければわかると思います。

左が「filter:blur」、右が「backdrop-filter:blur」を適用した例です。

左側の「filter:blur」は、画像の輪郭もぼやけているのに対し、右側の「backdrop-filter:blur」は画像の輪郭はくっきりとしています。

「filter:blur」は要素そのものをぼかすのに対し、「backdrop-filter」は要素の背景をぼかすものなので、輪郭はぼやけないんですよね。

自己紹介サイト「たきつぼ」ではメインビジュアルに使用しているので、画像の輪郭がぼやけると、画像のふちに背景の白色が入って不格好になってしまいました。なので、輪郭をくっきりさせるために「backdrop-filter」を使用しています。

あえて輪郭もぼやけさせたい場合

HTML

<p class="img_wrap">
  <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/t/taki_blog/20240120/20240120140929.jpg" alt="ぼやけた画像が徐々にクリアになるアニメーションのデモ" width="800" height="420" loading="lazy" itemprop="image" />
</p>

css

.img_wrap{
  filter: blur(8px);
  animation:blur 1s ease-in-out forwards;
}
@keyframes blur{
  0%{filter:blur(8px);}
  100%{filter:none;}
}

疑似要素がない分、大分すっきりしましたね。最近はニューモフィズムも流行していて、Webサイトにも取り入れられているので、あえて輪郭をぼかすのも良いですね。

最近はWebGLなどを用いたダイナミックなアニメーションを用いたサイトも多いですよね。あくまでも個人的な思いですが、ダイナミックなアニメーションは見ていて疲れるので、こういうさりげないアニメーションの方が好きです。