CSSによるアニメーション表示は、次第に市民権を得つつある様です。 ブラウザによる表示対応が次第に均質になり、誰もが簡単にこの機能を実現できる様になって来ました。
DevToolsには、アニメーションに関するCSSプロパティ値を、動作を見ながら調節できる優れた機能があります。 それが「cubic bezier editor」で、bezier(ベジェ曲線)で設定値をコントロールします。
以下は、表示文字を明滅させる簡単なコードを調節している所で、その文字をターゲットにDevToolsを起動しています。
この文字を修飾するCSS項に、「animation」を指定したコードがあります。 DevToolsは、この様な「animation」プロパティの値には特別なアイコンを表示します。
アニメーションを指定する値を編集する このアイコンをクリックすると、「cubic bezier editor」が起動して、判り難い書式の値を簡単に編集することができます。
エディターは下の様なものです。
❶はベジェ曲線の基本型を選択するものです。 これを切り替えると
❷の枠内で、基本形をベースにした6種の「ease-in-out」等を選択できる様になります。 しかし難しく考える必要はありません。
❶❷は調節のスタートの指定で、どこから始めても目的の曲線を得られます。 曲線と動作の見本位に考えれば良いでしょう。
エディターの主要な操作 調節の要点は
❸ の2個の「
●印」をドラッグする事です。 ドラッグをするとChrome画面上のターゲットのアニメーションの様態が変化します。 それを見ながら目的の動作に近付ければ良いのです。
●ドラッグの際、左右方向の範囲はグラフエリア枠の範囲ですが、上下方向はエリア枠を越える事が出来ます。
●下の
❷には、実際のプロパティ値が表示されます。(
❷は表示だけで編集はできません)
●このエディタは、「cubic bezier」値を編集しますが、「animation」の他のプロパティ値の時間(duration)値「1s」等は、Toolsの右ウインドウ(CSS)に戻って指定する必要があります。
動きを別の視点で表示 エディタの最上部
❹は、ベジェ曲線の縦軸の変化を視覚化したものです。
❹の部分をクリックすると、何度も動作を表示します。 Chromeの画面上で「他要素に移動が隠れる場合」の調節など、色々と必要な場面がありそうです。
目的の動作が得られたらCSS項をコピー DevToolsは、実験的にコードを調節する仮想環境を提供しています。 エディターの操作で得られた目的に合ったCSS項やプロパティ値は、コピーしてメモ帳などで保存し、ブログスキンなどのCSSに登録して、初めて実用利用できます。
〔参考〕
アニメーションのプロパティ値は奥が深いので、判らない事は以下のサイト等で調べてください。
+
この記事はカテゴリ「
スキン編集」にトラックバックしています。