• 2015年5月11日

CSS3 アニメーション 基本講座

CSS3講座

CSS3 アニメーション 基本講座

424 283 パソコン生活サポート Pasonal

今回、長らく更新していなかったCSS3について勉強してみました。一昔前までは、アニメーションと言えば「Javascript」か「Flash」でした。今では「HTML5」や「CSS3」はもはや当たり前の時代になりつつあります。

「小さなことからコツコツと」を、モットーに進めていきましょう!

(※CSSがある程度、理解できている前提で進めます)

【スポンサードリンク】

 

理解を深めるコツ

まずは上記のコードをご覧ください。これはCSSのクラスの記述です。

 

「-webkit-とか-moz-」って何??

10~14行目にかけて、「-webkit- / -moz- 」などが記述されています。これはベンダープレフィックスと呼ばれるものです。注釈にもある通り、「各種の古いバージョンのブラウザに対応させるための記述」です。2015年5月現在、ほとんどの最新ブラウザは様々なCSS3モジュールに対応しています。ですが、古いバーションに対応させるためには、このような「-webkit- / -moz- 」などの記述が必要になります。

逆に言えば、それぞれの最新ブラウザしか対象にしていないのであれば、これらの記述は不要となります。

 

各種ブラウザ対応への記述について

PCを使用しているユーザーの全てが「最新のブラウザ」にしているわけではありません。古いバーションのブラウザを今でも使用している人は結構たくさんいます。開発者側からしてみれば、より多くの人に対応させるように、このような記述するしかありません。

この状況はこの先、ブラウザのバージョンが上がれば解消されるでしょうが、しばらくはまだ続きそうです。

 

14行目の「transition(トランジション)」って何?

「transition」は、アニメーションが変化する時間を制御するためのものです。これは、よく「:hover(ホバー)」などの、動作を制御するものにしばしば用いられます。百聞は一見にしかず、「transition」と「通常の:hoverのみ」の違いを見てみましょう!

 

【 Transitionの書式 】

transration:時間 プロパティ 変化 ディレイ

  • 時間・・・・・・秒(s) | ミリ秒(ms)
  • プロパティ・・・all | none| プロパティ名
  • 変化の方法・・・ease | liner | ease-in | ese-out | ease-in-out | cublic-bizer()
  • ディレイ・・・・秒(s) | ミリ秒(ms)

例1:transition:0.2s ease-out;(「ease-out」の変化の方法で、「0.2秒」で変化させる)

transitionを使用したほうが、より滑らかに動作しているように見えます。こういった技術をホームページに採用すると、より一層、視覚的な効果が高まります。つまりは、ユーザーからの評価も高くなるということです。

 

2D回転

マウスオーバーすると、画像が傾きます。数値を変えることにより、傾きが大きくなります。

 

【 HTML 】

divタグにclassの要素を付けます。

【 CSS3 】

変形処理 関数
移動 translate( ) / translateX( ) / translateY( )
拡大 / 縮小 scale( ) / scaleX( ) / scaleY( )
回転 rotate( ) / rotateX( ) / rotateY( )
傾斜 skew( ) /  skewX( ) /  skewY( )

これは2D(平面)で回転するサンプルです。

斜め45度に傾きます。

 

【 rotateX と rotateY 】

ここの「X」と「Y」とは、「X軸(横)」、「Y軸(縦)」を表します。「rotateY(30deg)」とは、Y(縦)を軸にして「30度(右方向)」回転するということです。逆に「rotateX(30deg)」は、X(横)を軸にして「30度(右方向)」回転するという意味なります。

ちなみに、(30deg)はマイナス値も記述することが可能です。

例:rotateX(ー30deg)・・・左方向に30度回転する。

 

3D回転

それでは少しずつアニメーションに慣れるために、実際に色々なバリエーションを試してみましょう!

こちらはY軸を固定することにより、回転させることができます。

 

【 HTML 】

divタグにclassの要素を付けます。

 

【 CSS 】

変形処理 関数
移動 translate( ) / translateX( ) / translateY( )
拡大 / 縮小 scale( ) / scaleX( ) / scaleY( )
回転 rotate( ) / rotateX( ) / rotateY( )
傾斜 skew( ) /  skewX( ) /  skewY( )

上記はRotate(回転)のサンプルコードになります。「.sample1」のクラスでは、6行目で「background:url」を利用して画像を付け加えています。19~23行目ではTranfrom(トランスフォーム)を使用しています。

Transformは「変形」「拡大・縮小」などを制御することができます。

 

【 Perspective (パースペクティブ)】

Perspective(実数)で制御することができ、「透視投影」の中心点の距離を表します。

  • 実数が大きい(例:Perspective(1000)) → 歪みは小さくなる
  • 実数が小さい(例:Perspective(200)) → 歪みは大きくなる

 

移動の制御

こちらは、移動させるアニメーションです。

【 HTML 】

divタグにclassの要素を付けます。

 

【 CSS3 】

変形処理 関数
移動 translate( ) / translateX( ) / translateY( )
拡大 / 縮小 scale( ) / scaleX( ) / scaleY( )
回転 rotate( ) / rotateX( ) / rotateY( )
傾斜 skew( ) /  skewX( ) /  skewY( )

下記のサンプルでは、右方向に30px移動させます。

 

【 Translate(トランスレート)】

translateは移動を制御するためのものです。上記の例では、横方向(右方向)に30px移動させる記述です。

translate(X方向, Y方向)

  • X方向・・・よこ
  • Y方向・・・たて

 

グラデーション「keyframe」

一定間隔でバックグラウンドカラーが滑らかに変化します。

 

【 HTML 】

divタグにclassの要素を付けます。

 

【 CSS3 】

下記のサンプルでは、右方向に30px移動させます。

 

【 Keyframe(キーフレーム) 】

Keyframeは今までのものと少し異なります。まずは、sample4のclassに「-webkit-animation」を記述します。

詳細は以下の通り。

  • 「myanim」・・・任意の文字列です。
  • 「5s」・・・5秒間隔。
  • 「infinite」・・・ずっと繰り返す。

「@-webkit-keyframes myanim」では、「0%、50%、100%」の3段階で処理を分けています。つまり、「青色 → ピンク → 黄色」の順番で、背景色が移り変わっていきます。このパーセンテージはさらに細かく設定することもできます。

このkeframeを利用すると、様々なアニメーションが実現できるようになるので、是非覚えましょう!

 

Transform originの利用

transform originは原点を設定することで、アニメーションの方向を制御することができます。

 

【 HTML 】

divタグにclassの要素を付けます。

 

【 CSS3 】

下記のサンプルでは、一番左端を原点に設定し、右方向へ2倍になるように設定しています。

ぱそなる の最新の更新を
プッシュ通知で購読しよう

よかったらシェアしてください

返信を残す

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)