ぼかしのアニメーションをかけたい

前提・実現したいこと

下の画像の左から右の順番で円形のぼかしを表示するアニメーションを実装したいのですが、良いアイディアが浮かびません。

試したこと1

背景画像よりも大きいサイズの空洞の円を用意して外側から縮めるアニメーションという方法を考えたのですが、円に対してfilter:blur();を適用すると円の空洞部分も効果が適用されてしまいます。

行動規範の内容に同意します

回答1件

ベストアンサー

同じ画像をposition: absolute;で重ねて、背面の画像は filter:blur(); でぼかして、前面の画像をclip-pathで円形にくり抜きアニメーションさせればどうでしょうか。

html
1<div class="imgbox">
2  <img id="img1" src="https://picsum.photos/800/600">
3  <img id="img2" src="https://picsum.photos/800/600">
4</div>

css
1.imgbox {
2  position: relative; 
3}
4#img1 {
5  filter: blur(10px);
6  position: absolute;
7  top: 0;
8  left: 0;
9}
10#img2 {
11  animation: 3s linear 1s infinite alternate  circleBlur;
12}
13@keyframes circleBlur {
14    0% {
15        clip-path: circle(75% at center);
16    }
17    100% {
18        clip-path: circle(0% at center);
19    }
20}