明滅するプログラマの思索

WEBエンジニアとして勤務している一介の男が、日々気づいたことをまとめるブログです

jQuery で CSS の filter プロパティをアニメーションさせる

CSS の filter 機能は非常に多くの便利な効果を持っているので、スマートな WEBデザインを実現するのによく使われています。
例えば、ぼかしを入れたい場合は以下のように書くことができます。

.blur {
  filter: blur(20px);
}

jQuery に実装されている animate() メソッドは CSS プロパティをスムーズに更新してアニメーション効果を持たせることができますが、animate() に指定できるプロパティは、値に数値を持てるものに限定されているため、filter プロパティは指定することができません。
上記のぼかしの例では、値はblur(20px)という文字列であるため、animate() メソッドに指定できないわけです。
今回は CSS の filter をアニメーションさせるため、@keyframes を利用した CSS animation プロパティと、javascript の setTimeout() を利用してみます。
例として、1秒の間にぼかしの数値を0pxから20pxにアニメーションさせてみます。
CSS側の記述は以下のようになります。

@keyframes blur_animation {
  0% {
    filter: blur(0px);
  }
  100% {
    filter: blur(20%);
  }
}
.blur_animation {
  animation: blur_animation 1s linear 0s 1 normal forwards running;
}

CSS の @keyframes および animation プロパティを利用して、ぼかしのアニメーションを作ります。
これを jQuery の addClass() メソッドと removeClass() メソッドを使って、対象となるクラスに追加したり削除したりして、アニメーションを実装します。

Javascript 側の記述は以下のような感じです。

$(document).ready(function() {
  $('.target').addClass('blur_animation');
  setTimeout(function() {
    $('.target').removeClass('blur_animation');
  }, 1000);
});

上記のコードでは、ページの読み込みが完了した時点でアニメーションが開始します。
setTimeout() をアニメーションの時間と合わせてセットすることで、1回のアニメーションが終わり次第クラスの削除をするようにしています。

CSS の @keyframes と animation プロパティ、Javascript の setTimeout を利用すれば、filter プロパティも任意のタイミングでアニメーションさせることが可能です。