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

CSS3 アニメーション基本講座 https://pasonal.com/wp-content/uploads/2014/07/css3-gradient-thumbnail.jpg 424 283 パソコン生活サポート Pasonal パソコン生活サポート Pasonal //pasonal.com/wp-content/uploads/2016/11/Pasonal-logo-default.png 2015年5月11日 2017年8月8日

今回、長らく更新していなかった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）

例１：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 】

ここの「Ｘ」と「Ｙ」とは、「Ｘ軸（横）」、「Ｙ軸（縦）」を表します。「rotateY（30deg）」とは、Ｙ（縦）を軸にして「30度（右方向）」回転するということです。逆に「rotateX（30deg）」は、Ｘ（横）を軸にして「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方向・・・たて

グラデーション「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」・・・５秒間隔。
「infinite」・・・ずっと繰り返す。

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

この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倍*/
}

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