CSS Filtersはトランジションで使うのがお勧め！手軽に実装するいい感じのマウスオーバー演出

メンテナンス済み / 株式会社ICS 池田 泰延
137
100
102

CSS Filtersとはボカシや色調整などグラフィカルな効果が得られるCSSの機能です。この記事では「マウスオーバーなどの表現を作るのにCSS Filtersが便利」ということを紹介します。

CSS Filtersの使い方は簡単。CSSのfilterプロパティに適用したい種類の指定を行うだけです。たとえば、次のような指定をすると、HTML要素にエフェクトがかかった状態で表示されます。

CSS Filtersは実はアニメーションにも利用可能。多彩な表現が簡単に実現できるのにあまり使われているのを見かけない…と残念に思ったので、この記事で利用方法を紹介します！ 今回紹介するサンプルは、マウスオーバーでエフェクトを適用するシンプルなもの。まずは次のビデオをご覧ください。

明るさを使った表現

明るさ調整のbrightness()メソッドを利用してみましょう。マウスオーバー時に写真を明るく表示させるには、通常時と:hover時に異なるフィルターの値を設定し、CSS Transitionでアニメーションを付与するだけ。簡単ですね。

.effect-brightness {
  transition: filter 0.3s ease;
  filter: brightness(
    1
  ); /* デフォルト値なのでこの一行は省略してもOK */
}

.effect-brightness:hover {
  filter: brightness(1.75); /* 明るくする */
}

明るさを使った表現 （点滅）

CSS Transitionを工夫するだけで、さまざまなバリエーションを作れます。マウスオーバーしたときに一瞬ピカッと光る表現を入れることで、キビキビ動作する雰囲気の印象を与えることができます。

光る演出はcubic-bezier()メソッドでオーバー気味に加減速を設定するので、通常時とホバー時で異なるtransitionプロパティを指定するのが演出のコツです。

/* 通常時 */
.effect-flash {
  filter: brightness(1);
  /* イージングをおとなしくかける */
  transition: filter 0.5s;
}

/* ホバー時 */
.effect-flash:hover {
  /* 明るくする */
  filter: brightness(1.5);
  /* イージングを強烈にかける */
  transition: filter 0.4s cubic-bezier(0, 2.5, 0.2, 2.5);
}

CSS Transitionのイージングはデフォルトのease, ease-in, ease-outは使いみちがないくらい微妙なイージングなので、cubic-bezier()メソッドを使うのがオススメです。cubic-bezier()メソッドのパラメーターは「Easing Function 早見表」が参考になります。Flashクリエイター御用達のeaseOutQuadやeaseOutCubicのパラメーターも掲載されてます。

これに似た効果を実装した事例としては、ウェブサイト「ClockMaker Labs」や「Beautifl - Flash Gallery」があります。

彩度を使った表現

通常状態をモノクロにしておき、マウスオーバーしたときにモノクロを解除するテクニック。モノクロにすることで全体的に上品なデザインの表現に使えます。化粧品や服飾などブランド広告のウェブサイトとかに役立ちそうな表現です。

/* 通常時 */
.effect-mono {
  filter: grayscale(100); /* モノクロにする */
  transition: filter 0.2s;
}

/* ホバー時 */
.effect-mono:hover {
  filter: grayscale(0); /* モノクロを解除する */
}

明るさを使った表現（ボタンに最適）

brightness()を使った表現は、ポリモーフィズムなデザインのボタンに最適。光沢感のあるデザインは明度の変化は相性がよく、一枚のボタン画像だけでいい感じに仕上がります。デザイナーが通常状態のボタン画像しか用意してくれなかったとしても、簡単に設定できるので重宝します。

.btn {
  /* 通常時の明るさ(デフォルト値) */
  filter: brightness(1);
  transition: filter 0.3s;
}

.btn:hover {
  /* マウスオーバー時に明るくする */
  filter: brightness(1.15);
}

.btn:active {
  /* マウスダウン時に暗くする */
  filter: brightness(0.85);
}

この方法は、8年前の筆者の記事「Flashで一枚の画像を超シンプルにボタンにする方法」で紹介していた方法と同じ原理。「手を抜いて作ってる割にはそれっぽい」かつ「使いまわしがきく」ようなボタンです。

ボカシを使った表現

マウスオーバーしたときに追加の情報を表示するテクニック。サンプルとして、マウスオーバーしたときにSNSのシェアカウントを表示するというサンプルを用意しました。オウンドメディアなどのサイトで「記事がどれだけバズったか」を表現するのにひと味効かせたテクニックになります。

少しコードが複雑になるので、ここではポイントとなる箇所に焦点を絞って紹介します。詳しくはソースコードをご覧ください。

.effect-blur-thumb {
  transition: all 0.3s ease;
  width: 100%;
}

.effect-blur:hover .effect-blur-thumb {
  /* ホバー時にボカシと明るさを調整する */
  filter: blur(8px) brightness(1.5);
  /* 境界線の見栄えを改善するために拡大も入れておく */
  transform: scale(1.1);
}

CSS Filtersの動作環境 〜 IE以外は動く

最後にCSS Filtersの動作環境について紹介します。モバイルを含む最近のモダンブラウザー（MS Edge、Chrome、Firefox、Safari）は標準対応しています。唯一使えないのは、やはりInternet Explorerです（参照：「Can I use…」）。

2015年頃のSafariやAndroid 4.4の標準ブラウザまではベンダープレフィックスが必要になるので、-webkit-だけ付与したほうがいいかもしれません（-moz-や-ms-は必要ありません）。

.effect-something {
  -webkit-filter: brightness(1.5);
  filter: brightness(1.5);
  /* 「-webkit-filter 0.5s」も書くのが面倒なので「all」で */
  transition: all 0.5s;
}

MS Edgeは標準的なCSS Filtersには対応しているものの、CSS Filtersのurl()メソッド（svgに定義したフィルターを参照する機能）のみが使えません。url()メソッドはフィルター効果をカスタマイズする上級者向けの機能なので、あまり意識しなくてもいいでしょう。

CSS Filterのパフォーマンスは高い

CSS Filterは重たいのではないか、という意見もよく耳にします。そこで負荷を計測できるデモを作って試しました。比較的重たいと言われるblur効果も含めて適用したところ、2014年モデルのiOS端末で60fpsで表示することができました。とても滑らかにアニメーションしています。

ブラウザーやOSによってフィルターのレンダリングが異なるので、気になる方は次のデモを試してください。

WPJさんの記事「CSS3 filterプロパティ使い方まとめ！彩度・明度の調整からぼかし、グレースケール化まで」によると「説明してきたフィルターはどれもすごいパフォーマンスを発揮します（ハードウェアアクセラレーションを使用しないブラウザでぼかしフィルターが遅くなる場合があることを除けば）」と説明されています。

筆者が3-4年前にCSS Filtersを試したときは「フィルター効果は重たくアニメーションに不向き」という印象がありましたが、ブラウザーの進化によって状況は変わってきたように思います。すでに10年前のFlash全盛期にはCSS Filtersに類似のフィルター効果が普及していたので、昨今の性能が向上したパソコン/スマートフォンではそんなに気にする必要はないかもしれません。

まとめ

お手軽にエフェクトを適用できるので、ウェブサイトのUIにアクセントを入れるのに最適です。

記事「CSS3のブレンドモードmix-blend-modeを使いこなそう」でも紹介したように、最近のブラウザではCSSの機能が増え、グラフィカルな表現が手軽にできるようになってきました。2025年までサポートが続くと言われるInternet Explorer 11がCSS Filtersに未対応のためプロジェクトによっては使いづらい一面があると思いますが、選択肢の1つとして演出の引き出しに入れてみてはいかがでしょうか。

トップページに戻る