（この記事は、アドビ システムズ 株式会社発行の「Adobe Developer Connection」から許可を得て転載したものです）
CSS FilterLab
CSS FilterLabはブラウザーベースのツールで、CSSフィルターを使用した再生、CSSフィルターの調整、リアルタイムでのエフェクトの確認を行うことができます（図1を参照）。このツールを使用して、複数のフィルターを組み合わせたり、アニメーション化したりして、高度な映画のようなエフェクトを作成できます。
この記事の執筆時点では、これは本当に最先端のテクノロジーであるため、サポートされているのは数種類のブラウザーのみです。したがって、使用しているブラウザーでCSS FilterLabを開いたときに、最適なエクスペリエンスを実現するための手順が表示されます。アドビでは、この手順をできるだけ簡単でわかりやすいものにすることに注意を払いました。
最初の手順
CSS FilterLabの機能を試してみるのは簡単です。ブラウザーでCSS FilterLabを開いたら、Add Filter（フィルターを追加）メニューからフィルターを追加できるようになります。
組み込みフィルターまたはカスタムフィルターを適用することを選択できます。
幸い、CSS FilterLabには、カスタムフィルターとその基になるシェーダーの優れた例がいくつかバンドルされています。このような例の1つがFoldです。この例は、HTML要素に折りたたまれた紙のような3Dの外観を提供します（図2を参照）。
- 組み込みフィルターは、デフォルトでブラウザーに付属しているフィルターです。グレースケール、セピア、彩度、コントラストなどの基本的なカラーエフェクトを実現します。
- カスタムフィルターは、まったく新しいレベルのエフェクトを提供します。作成済みのいくつかの例には、焼き込み、カール、フォールド、ディゾルブ、エクスプロード、その他多くのエフェクトが含まれています。カスタムフィルターはブラウザーには付属していません。開発者自身が作成するものです。カスタムフィルターでは、カラーやジオメトリを細かく制御できるようにする、シェーダーと呼ばれる小さなプログラムが使用されます。シェーダーはハードウェアアクセラレーションを利用し、一般的にゲームのビジュアルエフェクトで使用されます。CSS開発者にとって、シェーダーはなじみが薄いものであるかもしれません。また、シェーダーを使用するには、一般的に数学を十分に理解している必要があります。
フィルターを適用すると、そのパラメーターコントロールが表示されます。これによって、非常に簡単にフィルターを微調整して、探し求めているエフェクトを得ることができます。さらに、複数の組み込みフィルターやカスタムフィルターを組み合わせて適用し、すばらしい結果を実現できます。
この結果に満足したら、変更内容をプリセットとして保存します。これにより、同じ設定を後で再利用できます。
エフェクトのアニメート
エフェクトは単に発生するだけではありません。エフェクトは発生して、ある状態から別の状態に遷移します。これによってエフェクトに豊かな表現力が生まれます。
CSS FilterLabには、基本的なアニメーションコントロールのセットが用意されており、フィルターのパラメーター値の間で滑らかなトランジションを作成できます。
タイムラインとコントロールは画面の下部にあります。タイムラインの任意の位置をクリックすると、アクティブなフィルターのパラメーターが変更されます。これにより、タイムライン上で新しいキーフレームが作成されます。再生ボタンをクリックすると、アニメーション全体が再生されます（図3を参照）。
キーフレームは、タイムライン上で追加、ドラッグ、削除することができ、アニメーションを思ったとおりに微調整できます。
アニメーションのデュレーションは、タイムラインの右側にある入力から変更できます。デュレーションの設定は秒単位です。
CSS FilterLabで折りたたみのアニメーションを作成する簡単な手順。（0:19）
