• 2015年5月11日

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

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

CSS3 アニメーション 基本講座 424 283 パソコン生活サポート Pasonal

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

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

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


 

理解を深めるコツ

/* ----------------------------------------------------------------------
CSS3 サンプル
---------------------------------------------------------------------- */
.sample1 {
	background:url(img/common/no_image1.gif); /*イメージ画像*/
	width:227px;
	height:83px;
	z-index:10;
	-webkit-transition:0.2s ease-out; /*Chrome , Safari , iOS , Android*/
	-moz-transition:0.2s ease-out; /*Firefox*/
	-o-transition:0.2s ease-out; /*Opera*/
	-ms-transition:0.2s ease-out; /*IE*/
	transition:0.2s ease-out;
}

まずは上記のコードをご覧ください。これは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="sample1"></div>

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

【 CSS3 】

 
/* ---------------------------------------------------------------------- 
CSS3 Transform サンプル rotate(2D回転)
---------------------------------------------------------------------- */
.sample1 {
	background:url(img/common/no_image1.gif);
	width:227px;
	height:83px;
	display:block;
	z-index:10;
	-webkit-transition:0.2s ease-in-out; /*Chrome , Safari , iOS , Android*/
	-moz-transition:0.2s ease-in-out; /*Firefox*/
	-o-transition:0.2s ease-in-out; /*Opera*/
	-ms-transition:0.2s ease-in-out; /*IE*/
	transition:0.2s ease-in-out;
}

.sample1:hover {
	-webkit-transform:rotate(45deg); /*Chrome , Safari , iOS , Android*/
	-moz-transform:rotate(45deg); /*Firefox*/
	-o-transform:rotate(45deg); /*Opera*/
	-ms-transform:rotate(45deg); /*IE*/
	transform:rotate(45deg);
}
変形処理 関数
移動 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="sample2"></div>

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

 

【 CSS 】

/* ----------------------------------------------------------------------
CSS3 Transform サンプル rotate(3D回転)
---------------------------------------------------------------------- */

.sample2 {
	background:url(img/common/no_image1.gif); /*イメージ画像*/
	width:227px;
	height:83px;
	display:block;
	z-index:10;
	-webkit-transition:0.2s ease-out; /*Chrome , Safari , iOS , Android*/
	-moz-transition:0.2s ease-out; /*Firefox*/
	-o-transition:0.2s ease-out; /*Opera*/
	-ms-transition:0.2s ease-out; /*IE*/
	transition:0.2s ease-out;
}

.sample2:hover {
	-webkit-transform:perspective(500) rotateY(30deg); /*Chrome , Safari , iOS , Android*/
	-moz-transform:perspective(500) rotateY(30deg); /*Firefox*/
	-o-transform:perspective(500) rotateY(30deg); /*Opera*/
	-ms-transform:perspective(500) rotateY(30deg); /*IE*/
	transform:perspective(500) rotateY(30deg);
	-webkit-box-shadow:2px 2px 2px #000000; /*Chrome , Safari , iOS , Android*/
	-moz-box-shadow:2px 2px 2px #000000; /*Firefox*/
        -o-box-shadow:2px 2px 2px #000000; /*Opera*/
        -ms-box-shadow:2px 2px 2px #000000; /*IE*/
	box-shadow:2px 2px 2px #000000;
}
変形処理 関数
移動 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="sample3"></div>

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

 

【 CSS3 】

 
/* ---------------------------------------------------------------------- 
CSS3 Transform サンプル translate(移動) 
---------------------------------------------------------------------- */ 
.sample3 {
	background:url(img/common/no_image1.gif);
	width:227px;
	height:83px;
	display:block;
	z-index:10;
	-webkit-transition:0.2s ease-in-out; /*Chrome , Safari , iOS , Android*/
	-moz-transition:0.2s ease-in-out; /*Firefox*/
	-o-transition:0.2s ease-in-out; /*Opera*/
	-ms-transition:0.2s ease-in-out; /*IE*/
	transition:0.2s ease-in-out;
}

.sample3:hover {
	-webkit-transform:translate(30px,0); /*Chrome , Safari , iOS , Android*/
	-moz-transform:translate(30px,0); /*Firefox*/
	-o-transform:translate(30px,0); /*Opera*/
	-ms-transform:translate(30px,0); /*IE*/
	transform:translate(30px,0);
}
変形処理 関数
移動 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="sample4"></div>

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

 

【 CSS3 】

 
/* ---------------------------------------------------------------------- 
CSS3 Keyframe グラデーション サンプル
---------------------------------------------------------------------- */
.sample4 {
	background-color:gray;
	width:227px;
	height:83px;
	display:block;
	-webkit-animation:myanim 5s infinite; /*5秒間隔 繰り返し*/
}

@-webkit-keyframes myanim {
	0%	{background-color:skyblue;} /*スカイブルー*/
	50%	{background-color:pink;} /*ピンク*/
	100%	{background-color:yellow;} /*5イエロー*/
}

下記のサンプルでは、右方向に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="origin1"></div>

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

 

【 CSS3 】

 
/* ---------------------------------------------------------------------- 
CSS3 origin サンプル
---------------------------------------------------------------------- */
.origin1 {
	background:#33CCFF;
	width:250px;
	height:80px;
	display:block;
	-webkit-transition:0.2s ease-in-out; /*Chrome , Safari , iOS , Android*/
	-moz-transition:0.2s ease-in-out; /*Firefox*/
	-o-transition:0.2s ease-in-out; /*Opera*/
	-ms-transition:0.2s ease-in-out; /*IE*/
	transition:0.2s ease-in-out;

	-webkit-transform-origin:0 0;
	-moz-transform-origin:0 0;
	-o-transform-origin:0 0;
	-ms-transform-origin:0 0;
	transform-origin:0 0;

}

.origin1:hover { 
	cursor:pointer; 
	-webkit-transform: scale(2,1);
	-moz-transform: scale(2,1); 
	-o-transform: scale(2,1); 
	-ms-transform: scale(2,1);  /*横方向 2倍*/
}

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