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、と名前を付けました。

HTML文書

CSS文書では、各画像毎にプロパティとキーフレームを作ります。 下の様に記述しました。

HTML文書

 

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」は使っていません。

ページトップへ

←前ページへ               目次へ戻る               →次ページへ

コーナー