THE HAM MEDIA BLOG

このブログでもひっそりと使っているCSSでのanimation。結構今更ですが、これも毎回調べたりしつつ使っているので、勉強したことを書きだしておきます。

今回はその中でもtransitionを使ってアニメーションをみてみようと思います。

webkitとOpera、Firefox4で動作

2011年1月現在、CSS3のアニメーションが動作するのはwebkitのSafariとChrome、それとOperaとFirefox4で動作します（IE未確認）。ただし、それぞれのブラウザでベンダープレフィックス（接頭語）がないと動作しません。

まずはデモを

まずは簡単に、ブロックが大きくなるデモから。

■CSS

.demo div{
    background-color:#0000ff;
    width:100px;
    height:100px;
    color:#ffffff;

    /*以下アニメーションの設定（○○はベンダーブレフィックス）*/
    -○○-transition-property:background-color,width,height;
    -○○-transition-duration: 2s;
    -○○-transition-delay: 0s;
    -○○-transition-timing-function: ease;
}

/*アニメーションさせた際の動作
.demo div:hover{
    background-color:#ff00ff;
    width:450px;
    height:200px;
    color:#000000;
}

divに:hoverをつけておりますので、IEの一部はこれすら動作しないです。

初期では、背景が青系色、横幅が150px、高さ100px、テキストは白。今回のデモでは、:hoverを指定しているので、その要素の上にマウスを乗せるとアニメーションが動作します。変化後は背景がピンク、幅450px、高さ200px、テキストが黒に変化します。

■デモ

それぞれのブラウザに合わせたボタンを押してプレフィックスを変更した後に、青い四角の上にマウスを乗せてみてください。プレフィックスをつけるボタンを押さないと動きませんし、対応ブラウザではなければアニメーションで動作しません。青い四角の上にマウスをのせずとも、若干角度が変わります。

アニメーションが動かない環境であれば、すぐに大きさと色が変わりますが、アニメーションが有効になれば、1秒の速さでアニメーションしながら:hoverに指定した値に変化します。

.demo div{
-○○-transition-property:background-color,width,height;
-○○-transition-duration: 1s;
-○○-transition-timing-function: ease;
-○○-transition-delay: 0s;
}

-moz--webkit--o-

さて、各プロパティをそれぞれみていきましょう。

transition-property

transitionを適用するプロパティ（アニメーションをさせるプロパティ）を設定します。background-colorやcolorなどの要素を設定しておくことで、指定した要素がアニメーションするようになります。

このプロパティを書いた際は、指定した部分の要素だけが動くようになります。自分はこのプロパティを書いて、要素を指定し忘れて「あれ？動かないよ！？」と慌ててしまうことが多いです。。。ご注意を。

ちなみに、変化させられる要素は下記の通りになります。

Property Name	Type
background-color	color
background-image	only gradients
background-position	percentage, length
border-bottom-color	color
border-bottom-width	length
border-color	color
border-left-color	color
border-left-width	length
border-right-color	color
border-right-width	length
border-spacing	length
border-top-color	color
border-top-width	length
border-width	length
bottom	length, percentage
color	color
crop	rectangle
font-size	length, percentage
font-weight	number
grid-*	various
height	length, percentage
left	length, percentage
letter-spacing	length
line-height	number, length, percentage
margin-bottom	length
margin-left	length
margin-right	length
margin-top	length
max-height	length, percentage
max-width	length, percentage
min-height	length, percentage
min-width	length, percentage
opacity	number
outline-color	color
outline-offset	integer
outline-width	length
padding-bottom	length
padding-left	length
padding-right	length
padding-top	length
right	length, percentage
text-indent	length, percentage
text-shadow	shadow
top	length, percentage
vertical-align	keywords, length, percentage
visibility	visibility
width	length, percentage
word-spacing	length, percentage
z-index	integer
zoom	number

※引用：CSS Transitions Module Level 3 Properties from CSS

一部はブラウザによってはうまく動作しないとかも？まだ未検証なので、いろいろ試してみたいと思います。

上の要素の一部をちょっとためしてみましょう

■Opacityデモ その１

:hoverで要素を半透明にします。

.demo3:hover div{
	opacity:0.3;
}

これをpositionや背景などと組み合わせたらロールオーバーとかも可能ですね。

■Opacityデモ その２

positionで要素を二つ重ねて、:hoverで上の要素をopacityで消します。

div.demo4front{
	position:absolute;
	z-index:2
}
div.demo4back{
	position:absolute;
	z-index:1
}
.demo4:hover div.demo4front{
	opacity:0;
}

■positionデモ

:hoverで要素が左から右に移動します。

.demo5:hover div{
	left:320px;
}

transition-duration

transitionの変化の時間を指定します。このプロパティがないとtransitionが動作しません。値は0.5sや1sなど、sという単位で指定します。1sで1秒です。値が大きいほどゆっくり変化し、値が小さいほど早く変化します。

■時間デモ

下のエリアにマウスを乗せると中にある２つのブロックが横に伸びます。上が0.5秒で、下が５秒かけてアニメーションします。

ゆっくりアニメーションさせたい時は数値を大きくしてみてください。

■時間デモ2

上のデモでは横に伸ばしてみましたが、左から右への移動でも時間指定による変化を見てみましょう

0秒から5秒まで、１秒刻みでブロックを用意し動かしてみました。0秒はアニメーションせず移動するようです。まぁ、当然ですよね。0秒ですから。

transition-timing-function

transitionの変化速度を指定することができます。一定の速度で変化させたり、最初早く、最後遅くなどの速度を指定できます。

指定出来る値は以下の用になっています。

ease	滑らかに
linear	一定速度
ease-in	ゆっくり→速く
ease-out	速く→ゆっくり
ease-in-out	ゆっくり→速く→ゆっくり
cubic-bezier	アニメーションの変化の仕方を指定

■速度デモ

それぞれの速度を見てみましょう。今回はどれも３秒での変化指定です。cubic-bezierは(0,1,1,0)を指定。

cubic-bezierで(0,1,1,0)を指定したら、なんだか奇妙な動きに（笑）

transition-delay

transitionの変化が始まる時間を指定することができます。値が大きいほど、変化するまで時間がかかります。

■遅延デモ

それぞれの開始のタイミングの差を見てみましょう。今回も全部３秒での変化指定です。動作開始のタイミングが１秒ずつ違います。

まとめて記述

ここまで説明したプロパティはまとめて記述することができます。

durationの時間だけが記述してあればアニメーションします。

記述例

div.demo9 div{
	-○○-transition: 1s ease-in-out 0s;
}

現在のOperaだと角丸はアニメーションしないっぽいですね。

プロパティごと記述

まとめて記述の際で、プロパティごとに指定を分ける際は、プロパティごとにコンマで区切る必要があります。アニメーションさせたいプロパティとdurationの指定だけがあれば動作します。

div.demo9 div{
	-○○-transition: width 1s ease-in-out 0s,
			  height 1s ease 1s,
			  background-color 1s ease 0s;
}

上のデモを見るとわかるのですが、プロパティごとにdelayを変えると、delayの時間ごとでプロパティの変化が変わります。

同じ要素を記述した際は後ろに書いた内容で上書きされて前に記述した内容は動作しません。

いろいろ試していて気づいたこと

今回いろいろ試していて気づいたんですけど、ブラウザによっては、アニメーションしない要素もいろいろあるようです。アニメーションしているかもしれないけど、あれ？って思うようなのも（z-indexとか）。Operaだと角丸がアニメーションしないっぽいですし。それと

それとFirefox4のプレビューを今回Windows版でみてみたのですが、アニメーション真っ最中って、マウスホイールでのスクロールってしないような…（気のせいだったらすみません）。それとまとめて書くショートハンド、これもうまく動かない？記述方法が悪いのかなあ…これは今後もチェックしてみます。

とまぁ、いろいろ試してみてこそわかるってのがありますね。

今回はtransitionのみ試してみたのですが、次はもう一つのanimationをためしてみようと思います。