THE HAM MEDIA BLOG

CSS3のtransitionプロパティでアニメーションを試してみた

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
アニメーション
transition
CSS

このブログでもひっそりと使っている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;
}

このブロックにマウスをのせてね(:hoverで下の四角が伸びます)

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

transition-property

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

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

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

Property NameType
background-colorcolor
background-imageonly gradients
background-positionpercentage, length
border-bottom-colorcolor
border-bottom-widthlength
border-colorcolor
border-left-colorcolor
border-left-widthlength
border-right-colorcolor
border-right-widthlength
border-spacinglength
border-top-colorcolor
border-top-widthlength
border-widthlength
bottomlength, percentage
colorcolor
croprectangle
font-sizelength, percentage
font-weightnumber
grid-*various
heightlength, percentage
leftlength, percentage
letter-spacinglength
line-heightnumber, length, percentage
margin-bottomlength
margin-leftlength
margin-rightlength
margin-toplength
max-heightlength, percentage
max-widthlength, percentage
min-heightlength, percentage
min-widthlength, percentage
opacitynumber
outline-colorcolor
outline-offsetinteger
outline-widthlength
padding-bottomlength
padding-leftlength
padding-rightlength
padding-toplength
rightlength, percentage
text-indentlength, percentage
text-shadowshadow
toplength, percentage
vertical-alignkeywords, length, percentage
visibilityvisibility
widthlength, percentage
word-spacinglength, percentage
z-indexinteger
zoomnumber

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

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

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

■Opacityデモ その1

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

.demo3:hover div{
	opacity:0.3;
}

マウスをのせてね(:hoverで動作)

1s Opacity

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

■Opacityデモ その2

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

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

マウスをのせてね(:hoverで動作)

1s Opacity

ここが徐々に見えてきます・・・

■positionデモ

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

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

マウスをのせてね(:hoverで動作)

1s Left

transition-duration

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

■時間デモ

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

マウスをのせてね(:hoverで動作)

0.5s

5s

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

■時間デモ2

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

マウスをのせてね(:hoverで動作)

0s

1s

2s

3s

4s

5s

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

transition-timing-function

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

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

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

■速度デモ

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

マウスをのせてね(:hoverで動作)

ease

linear

ease-in

ease-out

ease-in-out

cubic-bezier

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

transition-delay

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

■遅延デモ

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

マウスをのせてね(:hoverで動作)

0s

1s

2s

3s

4s

5s

まとめて記述

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

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

記述例

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

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

マウスをのせてね(:hoverで動作)

Shorthand DEMO

プロパティごと記述

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

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

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

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

マウスをのせてね(:hoverで動作)

Shorthand DEMO2

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

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

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

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

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

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。