More」に、CSS3を使ったアニメーションの手法がいくつか紹介されています。billboard)のようにテキストを点滅させています(サンプル001)。この表現でCSS3がどのように用いられているのかをご説明します。Webフォントの文字に光彩を与えるまず、テキストのフォントには「Monoton」を選びました。Fontsから読込めます(図001)。見栄えのするデザインで、サイズは大きめにして使われます。Fontsの「Monoton」Webフォントは、以下のようにlink要素で読込みます。そのrel属性はstylesheetとします(第1行目)。font-familyプロパティにフォントを定めましょう(第10行目)。行番号は後に全体を掲げるコード001にもとづきます。white;}</style>さて、背景は黒に近いグレー(#111111)、テキストは白(white)に決めました(第5および第13行目)。text-shadowプロパティで、テキストに白(white)を基調とした光彩を加え、文字に近づくにつれ緑(green)から青(blue)へと暗い色にぼけ幅を絞って重ねます(第12行目)。これで、暗いグレーの背景にMonotonフォントのカラーを白に定めて、白基調の光彩が加わったテキストの表現になります(図002)。図002■暗いグレーの背景に白のMonotonで白基調の光彩を加えたテキストWebフォントの読込みとスタイルシートの定めは、head要素の中にlink要素とstyle要素で加えます。まとめると、つぎのコード001のとおりです。body要素には、以下のコード002のようにdiv要素とp要素で光らせる文字を書きました。p要素には後でCSSアニメーションを加えられるように、class属性("main")が定めてあります(第2行目)。CSSでアニメーションさせる前掲コード001のスタイルシートに手を加えて、テキストが点滅するアニメーションにしてみましょう。簡略形プロパティ」参照)。下表001のようなサブプロパティを半角スペース区切りで加えます。サブプロパティを与えなければ、デフォルト値が用いられます。アニメーションの識別子(文字列)で、@keyframes規則により定められた名前。デフォルト値はnone(なし)。回のアニメーション周期を終えるまでに費やす秒数。デフォルト値は0sで、アニメーションしない。アニメーションさせる値がどのように変わるのかを表す数学関数。キーワードで与えることができ、デフォルト値はease。アニメーションが設定されたときを0として、動き始めるまでに待つ秒数。デフォルト値は0sで、アニメーションは直ちに動く。アニメーション周期を繰返す回数。animation-timing-functionプロパティに与えることのできるタイミング関数のキーワードと、それぞれの値の変わり方のグラフは下図003のとおりです。step-startstep-endanimationプロパティを定めたら、アニメーション表現がどのように移り変わるのかを、@keyframes規則にキーフレームとして書き加えます。キーフレームには、アニメーションが進んだ時間をpercentageで決め、そのときのプロパティの指定を行います。アニメーションの始まりと終わり、つまりpercentageが0%と100%のふたつのキーフレームは必ず与えなければなりません[*1]。{プロパティの指定}}さらに、中間のpercentageにもキーフレームが加えられます。複数のpercentageで同じプロパティを指定するときは、それらのpercentageをカンマ(,)区切りで続けて書きます。アニメーションは、percentageの小さい順にプロパティの指定を切替えます。その間の値の変わり方は、animation-timing-functionで決まります。animationプロパティと@keyframes規則を使ったスタイルシートの書き方は、たとえば以下のようになります。今のところブラウザに応じてベンダー接頭辞をつけなければなりません。Chrome向けに用いられます。animationプロパティに定めたアニメーションは、長さ10秒で加速と減速のイージング(ease-in-out)を加え、待ちはなく(0s)、そしてinfiniteはずっと繰返し続けます。@keyframes規則では、アニメーション識別子(fade)に対してアルファ(opacity)と光彩(text-shadow)をフレーム間で切替えます。percentage0%から25%までと、75%から100%までは、完全な不透明で白を基調とした光彩がかかります。25%から50%までかけて半透明(0.4)になって光彩は消え、50%から75%の間でもとに戻ります。none;}}これでbody要素に加えたテキスト(class属性"main")のうち、span要素に含めたひと文字(i)が前掲animationプロパティの定めにしたがってアニメーションします。この文字は数秒経つとアルファと光彩が少しずつ薄れ、数秒でもとに戻って、その繰返しになります。0%と100%は、それぞれfromとtoで表すこともできます。ベンダー接頭辞を省くJavascriptライブラリCSSアニメーションを複数のブラウザで動かそうとすると、ベンダー接頭辞が増え、同じことをその数だけ書かなければなりません。修正が入ったときの手間も増します。free」を使うと、CSSからベンダー接頭辞が省けます(図004)。freeが自動的につけてくれるのです(Webクリエイターネット「CSS3のベンダープレフィックス」参照)。freeのJavaScript(JS)ファイル(prefixfree.min.js)をscript要素に読込むだけです。将来の仕様でベンダー接頭辞が要らなくなったときも、script要素を除けば済みます。freeのJSファイルを読込めば、前掲のスタイルシートの例も、つぎのようにベンダー接頭辞は省くことができます。文字をイルミネーションのように点滅させるそれでは、CSSアニメーションで、文字をイルミネーションのように点滅させましょう。freeライブラリとWebフォントの読込み(script要素とlink要素)およびスタイルシート(style要素)を、以下のコード003にまとめました。animationプロパティのanimation-timing-functionに与えるタイミング関数は、step-endを選びました(第19行目)[*2]。この関数は、キーフレームの間でプロパティの値を連続的に変えるのではなく、非連続で直ちに切替えます(図005)。animation-timing-functionの後のanimation-delayの秒数が抜けています。infinite;}図005■タイミング関数step-end@keyframes規則のpercentageの間隔は、イルミネーションが点滅する雰囲気が出るように細かく調整しました(第22および第26行目)。テキストにマウスポインタを重ねたとき光彩が薄く広がるように:hover疑似クラスの定めも加えています(第17行目)。none;}}これでbody要素に加えたテキスト(class属性"main")のうち、span要素に含めたひと文字(i)がイルミネーションのように点滅します。span要素は、以下のコード004のように定めました。mid-animation」のサンプルでは、タイミング関数としてつぎのようにキーワードlinearが使われています。この関数はキーフレームの間、時間と比例して値を変えます(図006)。そこで、値をすぐに切替えるよう、@keyframes規則のpercentageの間隔を0.001(たとえば19.999%から20%)にしています。本文のようにタイミング関数としてstep-endを与えれば、このような細かなキーフレームは要りません。テキストとCSSアニメーションをさらに加えるそれでは仕上げに、テキストとCSSアニメーションをさらに加えましょう。body要素には、つぎのコード005のように、点滅させる文字が含まれたp要素のテキストをふたつ加え、3段落としました。ふたつ目のp要素にはひとつ目と同じclass属性("main")を与えましたので、アニメーションの仕方も同じです。3つ目のp要素はid属性("sub")が加わり、span要素がふたつ含まれています(第4行目)。こちらのアニメーションは少し変えます。id="sub">.c<span>o</span><span>m</span></p></div>head要素のstyle要素には、後にまとめたコード006のように手を加えます。body要素の3つ目のp要素(id属性"sub")に定めるアニメーション以外のスタイルシートをつぎに抜書きしました(行番号はコード006にもとづきます)。テキストの色を赤にしましたので(第22行目)、光彩も赤を基調にしました(第16および第21行目)。ひとつめのspan要素は半透明にして光彩も除きました(第27〜30行目)。背景が黒ですので、このspan要素は暗く見えます(図007)。none;opacity:0.4;}図007■3段目の真ん中の赤い文字が暗く見えるbody要素の3つ目のp要素(id属性"sub")には、つぎに抜書きしたCSSアニメーションを加えました。animationプロパティや@keyframes規則の書き方は、初めのp要素と同じです(前掲コード003参照)。小刻みに点滅するように、percentageを細かく決めました(第42および第45行目)。none;}}head要素に加えた前掲コード003のスタイルシートを書替えたのが、つぎのコード006のstyle要素です。これで3つのp要素のテキストの文字に、ふたつの異なったCSSアニメーションが加えられます。light」は、これらコード005と006をまとめたものです。コードの一部修正とそれに伴う説明の変更。