【CSS】backdrop-filterでアニメーションを作ってみる
記事更新日：2022-02-05
filter と backdrop-filter って何が違うの？
backdrop（ 背景幕）のフィルター
backdrop-filter: blur()は、「背後（back）」
filter:blur()は、「前面」
例）aタグにbackdrop-filter: blur()をかけた場合
aタグの背景がボケてて、汽車の通り道みたいな雰囲気になってる。
例）aタグに filter: blur()をかけた場合
文字も一緒にボケちゃってるし、背景に何もない。
【 Point 】
使う場所によって、filter か backdrop-filter かで結果が少し違う
疑似要素を使ってボカしてみる
まずは backdrop-filterでボカシを入れてみよう。
疑似要素を使うとキレイにできる。
ここをクリックしてコードを見る
.item {
position: relative;
display: flex;
width: 100%;
height: 100%;
background: url(画像パス);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
transition: filter 1s ease;
&::after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(10px);
z-index: 1;
}
}
きれいにボケてる。
左半分だけボカす
幅のサイズを50% にすれば半分になるよ。
ここをクリックしてコードを見る
.item {
〜
&::after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 50%;
height: 100%;
backdrop-filter: blur(10px);
z-index: 1;
}
}
左側に文字を入れたくなる。
ホバーエフェクトにしてもよさそう。
ここをクリックしてコードを見る
.item {
〜
&::after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 50%;
height: 100%;
backdrop-filter: blur(10px);
transform: translateX(-100%);
z-index: 1;
&:hover {
&::after {
animation: transform-anim .5s forwards;
}
}
}
}
@keyframes transform-anim {
100% {
transform: translateX(0);
}
}
サイドバーにも使えそう。
下半分をボカす
上下だから、高さを50%にすればいいよ。
ここをクリックしてコードを見る
.item {
〜
&::after {
position: absolute;
content: '';
bottom: 0;
left: 0;
width: 100%;
height: 50%;
backdrop-filter: blur(10px);
z-index: 1;
}
}
カード型でよくありそう。
疑似要素の before と after で効果を変える
それぞれ違うフィルターにすることもできるよ。
ここをクリックしてコードを見る
.item {
〜
&::before,
&::after {
position: absolute;
content: '';
left: 0;
width: 100%;
height: 50%;
z-index: 1;
}
&::before {
top: 0;
backdrop-filter: grayscale(1);
}
&::after {
bottom: 0;
backdrop-filter: blur(10px);
}
}
１つのタグで、２つのフィルターが使えるんだね。
divタグを増やせば、複数のフィルターが使える
divタグを作って、４分割にしてみたよ。
ここをクリックしてコードを見る
<div class="item">
<div class="filter"></div>
</div>.item {
〜
&::before,
&::after,
.filter::before,
.filter::after {
position: absolute;
content: '';
top: 0;
width: 25%;
height: 100%;
z-index: 1;
}
&::before {
left: 0;
backdrop-filter: hue-rotate(20deg);
}
&::after {
left: 25%;
backdrop-filter: hue-rotate(60deg);
}
.filter {
&::before {
left: 50%;
backdrop-filter: sepia(1);
}
&::after {
left: 75%;
backdrop-filter: hue-rotate(100deg);
}
}
}
しましま模様になった。
アニメーションを追加
４分割のままアニメーションにするのも面白いよ。
ここをクリックしてコードを見る
.item {
〜
&::before,
&::after,
.filter::before,
.filter::after {
position: absolute;
content: '';
top: 0;
width: 25%;
height: 100%;
z-index: 1;
animation: anim 2s infinite alternate;
}
&::before {
left: 0;
backdrop-filter: hue-rotate(20deg);
}
&::after {
left: 25%;
backdrop-filter: hue-rotate(60deg);
}
.filter {
&::before {
left: 50%;
backdrop-filter: sepia(1);
}
&::after {
left: 75%;
backdrop-filter: hue-rotate(100deg);
}
}
}
@keyframes anim {
0% {
transform: translateX(-100%);
filter: hue-rotate(0);
}
100% {
transform: translateX(100%);
filter: hue-rotate(0);
}
}
昔のブラウン管みたいな感じ。
１つだけでアニメーション
４分割じゃなくて、１つだけでもいいかもね。
ここをクリックしてコードを見る
.item {
〜
&::after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
backdrop-filter: grayscale(1);
animation: anim 20s infinite ease-out;
}
}
@keyframes anim {
0% {
transform: translateX(-100%);
filter: hue-rotate(0);
}
100% {
transform: translateX(100%);
filter: hue-rotate(0);
}
}
だんだんと色がなくなっていく。
上から下へのアニメーション
ボケのアニメーションにしてみよう。
ここをクリックしてコードを見る
.item {
〜
&::after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 50%;
z-index: 1;
animation: anim-2 10s infinite;
}
}
@keyframes anim {
0% {
transform: translateY(-100%);
filter: hue-rotate(0);
}
100% {
transform: translateY(100%);
filter: hue-rotate(0);
}
}
最初はボカシて隠しておきたいときに、いいね。
まとめ
gifだとキレイに見えないので、デモページ（https://tsukiusagi.biz/demo/backfilter/）も参考にしてね。
いろんな色効果を使ってみよう。
2022-02-05
編集後記：
この記事の内容がベストではないかもしれません。