HTML5に書き換えてみた
5.CSS3でアニメーション
1から4で基本的な構成のページを書き換えました。この後はさらにページの機能、デザインを向上させます。
まず優先順位が高いのは、JavaScriptやGIFアニメを使っているページを書き換えたいと思います。 該当するページではJavaScriptの「setInterval」を使って画像を移動させたり大きさを変えたりしているのですが、FireFoxやEdgeと相性悪い為の様です。 生意気にも、ブラウザの選り好みをしております。
CSSとはスタイルシートの事で、その最新版のCSS3ではアニメーション機能が実装できる様になりました。 そこで今回、JavaScriptから「CSSアニメーション」に置き換えます。
CSSアニメーションの基本
CSSアニメーションを作成にあたっては、HTML文書、CSS文書、JavaScript文書のそれぞれを次の様に加工します。
HTML文書・・・アニメーションを掛けたい図形・画像に名前を付ける(ID,CLASS)
CSS文書・・・アニメーションさせたい図形・画像にanimationプロパティを追加する
CSS文書・・・いつ、どのように変化させるかを「キーフレーム」にまとめる
JavaScript文書・・何も追加しない
実施例でHTML文書、CSS文書を見て見ます。
HTML文書のアニメーションを掛ける画像にclass属性で名前を付けます。 太陽、飛行船、メールの3つの画像に、それぞれtitlesunimg、titlehikousenimg、titlemail、と名前を付けました。
CSS文書では、各画像毎にプロパティとキーフレームを作ります。 下の様に記述しました。
CSSにおけるanimationプロパティ
画像や図形にアニメーションを掛ける場合、「animation-」で始まる以下の6つのプロパティを使います。
animation-name・・・アニメーション名を指定する(キーフレームに付けた名前)
animation-duration・・・1回分の再生時間を指定する(秒数)
animation-timing-function・・・アニメーションの進行割合、変化の仕方を指定する
(3次ベジェ曲線が・・難しいので、以下の説明にしておきます)
値ease・・・最初と完了を滑らかな動きにする
値linear・・・一定速度の動きにする
値ease-in・・・ゆっくり始まる
値ease-out・・・ゆっくり終わる
値ease-in-out・・・ゆっくり始まって、ゆっくり終わる
animation-delay・・・アニメーションの開始を遅らせる時間値名を指定する(秒数)
animation-iteration-count・・・アニメーションの繰り返し回数を指定する(秒数)
値infinite・・・無限に繰り返す
animation-direction・・・アニメーションの繰り返し回数を指定する(秒数)
値normal・・・普通方向の再生を繰り返す
値alternate・・奇数回で普通方向、偶数回で逆方向の再生を繰り返す
例えば飛行船(titlehikousenimg)の場合は、キーフレームのアニメ―ション名が「anime2」、 再生時間は5.6秒、再生回数は1回のみ、リニアな変化のアニメ―ション、再生開始遅れは無し、のプロパティと言う事になります。
CSSにおけるキーフレーム
アニメーションのキーフレームとは、アニメーションの進行表と考えると良いでしょう。 CSS文書の中に下の様に記述します。
@keyframes アニメーション名 {1回の開始から終了までのプロパティ変化}
プロパティ変化は時間経過%(終了時点が100%)時経過段階でのプロパティ値で表示します。
又、変化させるプロパティの代表的なものは、位置、大きさ、背景色、透明度などです。
例えば飛行船(titlehikousenimg)用のキーフレームanime2の場合、開始時(0%)には幅90pxに拡大した画像を左へ560px下50pxへ移動させて置き、 時間が40%経過した時点では画像は幅42pxに縮まり右に240px(-560-(-320))動いています。 時間が99%経過した時点では画像は幅42pxですが、100%経過すると右に320px上に50px移動している画像の幅は1pxになり目視不能になります。
飛行船が右の方に流れながら上昇して遠くへ行き、到達したとたんに消え去るアニメーションです。
これが書き換え後のホームページです。
太陽と飛行船が左から右に移動し、移動し終わったら消えて小鳥のメール便屋が出て来ます。
ナビ部のボタンにマウスを乗せると「お知らせコーナー」の内容が変わります。 これはHTML5+CSS3の利用したものではなく、従来から搭載していたJavaScriptを利用したものです。「setInterval」は使っていません。