2020.11.24レシピアニメーション画像のぼかしをアニメーションで変化させるCSSのfilterプロパティのblurメソッドで指定した画像のぼかし具合をアニメーションで変化させる方法について解説します。画像のぼかし具合の変化をアニメーションにするanimationプロパティを使ったぼかしのアニメーション画像のぼかし具合の変化をアニメーションにするCSSではimg要素で読み込んだ画像のぼかし具合をfilterプロパティのblurメソッドで調整することができます。このプロパティはtransitionプロパティやanimationプロパティと組み合わせることで、ぼかす過程をアニメーションにすることも可能です。今回はこれらのプロパティとJavaScriptによるclass属性の編集操作を組み合わせることで、ぼかし具合をアニメーションさせていきます。transitionプロパティを使うパターンとanimationプロパティを使うパターンの2種類解説していきますが、まずはtransitionプロパティを使ったパターンから解説していきます。以下の例は「デフォルト」「2px」「5px」「10px」の4つのボタンからいずれかを押すと、表示している画像のうち2枚目のimg要素のclass属性を切り替えて、ぼかし具合の変化のアニメーションを再生します。alt="加工画像"><figcaption>調整後</figcaption></figure></div></article>CSSは下の方の「ぼかしの調整」部分に記述している箇所が非常に重要です。ここではfilterプロパティによるぼかし具合の調整に加えて、transitionプロパティを使ったアニメーションの設定も行います。blur(10px);}blurメソッドの0は初期状態でぼかす前の元画像と同じ状態です。それ以外の値とボタンとの関係は以下のように設定します。10px最後にJavaScriptのコードです。'10px':pic2.setAttribute('class','strong');break;default:pic2.removeAttribute('class');break;}});}});switch文の条件式にある「e.target.textContent」は押されたボタンのテキストを取得しています。このテキストをcase文で判定して、適用するblurメソッドを決定します。case文ではimg要素に対してsetAttributeメソッドやremoveAttributeメソッドを使ってclass属性を書き換えます。適用するクラスが切り替わることで、CSSに記述したtransitionプロパティのアニメーションが実行される仕組みになっています。animationプロパティを使ったぼかしのアニメーション上記のコードではtransitionプロパティを使ってアニメーションの設定を行いましたが、animationプロパティに置き換えた場合のCSSは以下のようになります。変更はCSSのみとなり、HTMLとJavaScriptについては変更の必要はありません。transitionプロパティとは1点だけ異なる点があります。animationプロパティのアニメーションを設定する@keyframesは現在適用されているプロパティの値を引き継ぐことができません。そのため、何かボタンを押してアニメーションを実行した後の状態で、他のボタンが押されたときに次のアニメーションを開始するときは初期値「blur(0)」からのスタートになります。blur(10px);}}こちらの記事は役に立ちましたか?GoodBadありがとうございます。よろしければ、あわせてフィードバックや要望などをご入力ください。コメント送信コメントありがとうございます!運営の参考にさせていただきます。要件を満たすコードをササッと書けて、どこでも通用するような凄いエンジニアになりたい。エンジニアをやっていると、そんな憧れや「個人の能力・スキル」重視の思考に陥ったことが一度はあるのではないでしょうか。本書はそんな個人思考から脱却し、より広い視点を持ちながら効率良い開発を進められるようなエンジニアの参考にすべき考え方が詰まっています。