質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Q&A

解決済

1回答

3701閲覧

animationでfilter:blurを用いると画像の縁が白くなる

maemaemae3

総合スコア2

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

1グッド

1クリップ

投稿2020/07/02 14:02

編集2020/07/09 09:01

前提・実現したいこと

登録した画像が自動的に切り替わるようなスライドショーを作ろうとしています。
スライドショーの要件に以下の2点があります。

  • 画面いっぱいに画像を表示
  • 画像の切替時に、ぼかしつつ、クロスフェーディングさせる

上記の要件を満たすため、CSS3の filter:blur();animation を組み合わせて実現しようとしており、Vue.jsの transition の機能を使って、各状態を管理しようと考えました。

発生している問題・エラーメッセージ

chromeのみ、filter:blur(); を適用した際、画像の縁が白くなってしまう現象が起きています。
firefoxでは起こらず、IE11はそもそもblurに対応していないため、画像が切り替わるだけになります。
[追記] 環境によってはfirefoxでも同様の現象が起こるようです。

chromeの場合
chrome

firefoxの場合
(当方環境での見え方です、環境によっては白い縁が見えてしまうことがあるようです)
firefox

該当のソースコード

遷移中のHTMLとCSSの状態は、以下のようになっています。

html

1<div style="{'background-image': `url(image1)`}" class="full blur-leave-active"/> 2<div style="{'background-image': `url(image2)`}" class="full blur-enter-active"/>

css

1.full { 2 background-position: center; 3 background-size: cover; 4 position: absolute; 5 width: 100%; 6 height: 100%; 7 transform: scale(1.2); 8} 9 10.blur-leave-active { 11 animation: blur-animation-out 4s; 12} 13.blur-enter-active { 14 animation: blur-animation-in 4s; 15} 16 17@keyframes blur-animation-out { 18 0% { 19 filter: blur(0); 20 opacity: 1; 21 } 22 30% { 23 filter: blur(30px); 24 opacity: 0.8; 25 } 26 50% { 27 opacity: 0; 28 } 29} 30 31@keyframes blur-animation-in { 32 0% { 33 filter: blur(30px); 34 opacity: 0; 35 } 36 50% { 37 opacity: 1; 38 filter: blur(30px); 39 } 40 80% { 41 filter: blur(0); 42 } 43}

また、こちらに実際に動作するJSFiddleを置いています。
https://jsfiddle.net/maemaemae3/0v2abhs5/8/

試したこと

  • 試しに、 animation を動作させずに、 filter:blur(); のみをかけたところ、画像の縁が白くなることはありませんでした。

そのため、 animation を行うことが原因の一つになっていると考えられます。

  • 画像を予め scale などを使用して拡大しておけば、縁の白い部分が隠れることで結果的にごまかすことが出来るという情報を見つけ、実践してみましたが、うまく行きませんでした。

画面いっぱいに画像を表示した状態でやっているのが原因かと思い、 margin などを持たせてみましたが、いくら拡大率を上げても、白い縁が見えてしまいます。

補足情報(FW/ツールのバージョンなど)

確認したブラウザのバージョン
google chrome 83.0.4103.106
firefox 77.0.1
Vue.js 2.2.1

どうぞよろしくお願いいたします。

Lhankor_Mhy👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2020/07/03 01:57

ご提示の ページを当方で確認したところ、Firefox77でしたが、アニメーション中に白いふちを確認できましたのでご報告しておきます。
maemaemae3

2020/07/03 02:19

ご報告ありがとうございます。 タイトルと内容の修正を行います。
guest

回答1

0

自己解決

極めて強引ですが、chromeの場合のみ backdrop-filter を使用することで解決しました。
ただ、オーバーレイしている要素に対して、 backdrop-filter: blur(XXX)XXX の数値をアニメーションさせると、今度は縁の部分が白ではなく、ぼかせていない状態になってしまいました。

そのため、予め必要な分ぼかしを入れた要素を opacity: 0 で持っておき、 opacity の値をアニメーションで増減させることで、きれいに全体をぼかしつつクロスフェードすることが出来るようになりました。

css

1.full { 2 background-position: center; 3 background-size: cover; 4 position: absolute; 5 width: 100%; 6 height: 100%; 7 transform: scale(1.2); 8} 9 10.overlay { 11 position: absolute; 12 right: 0; 13 top: 0; 14 height: 100%; 15 width: 100%; 16 opacity: 0; 17 backdrop-filter: blur(30px); 18 &.blur-animation { 19 animation: overlay-blur-animation 4s; 20 } 21} 22 23.blur-leave-active { 24 animation: blur-animation-out 4s; 25} 26.blur-enter-active { 27 animation: blur-animation-in 4s; 28} 29 30@keyframes blur-animation-out { 31 0% { 32 opacity: 1; 33 } 34 30% { 35 opacity: 0.8; 36 } 37 50% { 38 opacity: 0; 39 } 40} 41 42@keyframes blur-animation-in { 43 0% { 44 opacity: 0; 45 } 46 50% { 47 opacity: 1; 48 } 49 80% { 50 filter: blur(0); 51 } 52} 53 54@keyframes overlay-blur-animation { 55 20% { 56 opacity: 1; 57 } 58 70% { 59 opacity: 1; 60 } 61 100% { 62 opacity: 0; 63 } 64}

backdrop-filterを使った版がこちらになります。
(chrome(とおそらくsafari)でしか動作しません)
https://jsfiddle.net/maemaemae3/vko6tqp7/19/

投稿2020/07/09 15:39

maemaemae3

総合スコア2

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問