WordPressのテーマ作成（6）　CSS3にチャレンジ transition

Tweet

transition

transitionは時間的変化を付けます。
基本的にはhoverで使うことが多いようです。
（ベンダープレフィックスはgoogle chrome用しか使っていないので、
google chromeで見てください。）

div.trans{
width:100px;
height:100px;
background-color:red;
-webkit-transition:all 2s ease;
}

div.trans:hover{
width:150px;
height:150px;
background-color:blue;
}

5行目の
allの部分は対象のプロパティを指定します。
allまたは個別のプロパティ(background-colorとか)を入力します。
noneを入れると変化をしません。

2sの部分は変化にかかる時間です。

easeの部分は変化の仕方です。
easeは始めと終わりがなめらか。

linearは一定の速度。

ease-inは始めがゆっくり。

ease-outは終わりがゆっくり。

ease-in-outは始めと終わりがゆっくり。

cubic-bezierはベジェ曲線で指定ということらしいですが、よくわからないので省きます。

transitionは複数指定できます。
プロパティごとに変化にかかる時間や変化の仕方を指定することができます。

div.trans2{
width:100px;
height:100px;
background-color:red;
-webkit-transition:background-color 2s ease,height 2s ease,width 5s ease;
}

div.trans2:hover{
width:300px;
height:100px;
background-color:blue;
}

さっきは赤色の四角が青になるのと大きくなるのが同時に終わっていましたが、
こちらは先に色の変化が終わってその後にサイズの変化が終わっています。

正直なところ、transitionは使い道がよくわからないかな＾＾；

にほんブログ村 パソコン・周辺機器

Tweet