“Filter Effects Module”

概要

“CSS Transforms Module”はCSSによって画像や要素の色合いを変更したり、ぼかし効果などを適用できるグラフィカル効果について定義している仕様書です。

要素に適用されるグラフィカル効果を指定する“filter”プロパティやフィルター関数について定義されています。

フィルター効果はもともとはSVGのための機能であり、SVGのためのプロパティやSVGの構文についても定義されています。

仕様書

定義されているプロパティ

filter
flood-color
flood-opacity
color-interpolation-filters
lighting-color

定義されている関数

blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
sepia()
saturate()
filter()

フィルター効果の補間

アニメーション時のフィルターの補間は以下の手順で行われます。

どちらのフィルター・リストも同じ長さであり、それぞれ対応するリスト・アイテムがあり、“<url>”値を含まない場合

それぞれのフィルター関数の組を下記の方法で補間します。

フィルター・リストの長さが異なり、それぞれ対応するリスト・アイテムがあり、“<url>”値を含まない場合

不足しているフィルター関数の初期値に設定されたものをフィルター・リストの最後に追加します。

それぞれのフィルター関数の組を下記の方法で補間します。

一方のフィルターが“none”でもう一方のフィルターが“<url>”値を含まないフィルター・リストである場合

“none”をもう一方のフィルター・リストに対応するフィルター関数があり、それぞれが初期値に設定されたフィルター・リストに置き換えます。

それぞれのフィルター関数の組を下記の方法で補間します。

それ以外の場合

離散

続いて、使用されているフィルター関数によって下記の方法で補間されます。

“blur()”関数である場合

計算値を長さとして補間します。

“brightness()”関数、“contrast()”関数、“grayscale()”関数、“invert()”関数、“opacity()”関数、“saturate()”関数、“sepia()”関数である場合

パーセント値は数値に変換し、計算値を数値として補間します。

“hue-rotate()”関数である場合

計算値を数値として補間します。

“drop-shadow()”関数である場合

繰り返し可能なリストとして補間します。

プロパティ

関数