memocarilog

最近CSS3のアニメーションを勉強しています。復習を兼ねて transition プロパティの基本的な使い方をまとめました。

“transition”は時間的変化という事のようです。animation プロパティよりも簡易的なアニメーションという印象で、animation より単純な指定でよいのでとっかかりやすかったです。

現時点でtransitionはIEは全く対応しておらず、その他のブラウザでもベンダープレフィックスが必要です。

アニメーションさせたい要素に、tansitionの4つのプロパティを指定する事により動きを表現できます。プロパティはまとめて書く事もできます。ベンダープレフィックスが必要なので、まとめて書かないと長くなってしまいますね。tansitionの各プロパティの説明が以下になります。

1. transition-propety

アニメーションの対象とするcssのプロパティを指定する。サイズだけを対象とするならば、heightやwidth と記入する。allとして全てを対象とする事もできる。

使用例

transition-property : all ;
↓↓対象が複数ある場合はカンマで区切って指定。
transition-property : width,height ;

2. transition-duration

アニメーションにかかる時間を指定する。

使用例

transition-duration : 1s ;
↑ 1sで1秒かけてアニメーションするという意味。

3. transition-timing-function

アニメーションの動きの指定。
ease , linear , ease-in , ease-out , ease-in-out の値を入れる事ができる。

使用例とそれぞれの動きのデモ

ease

transition-timing-function: ease ;

linear

transition-timing-function: linear ;

ease-in

transition-timing-function: ease-in ;

ease-out

transition-timing-function: ease-out ;

ease-in-out

transition-timing-function: ease-in-out ;

4. transition-delay

何秒後にアニメーションを開始するかを指定。

使用例

transition-delay: 2s ;
↑ 2sで2秒後に開始。0を指定ですぐに開始。

まとめて書く場合の書き方

まとめて書く場合は下記の順番でなくてもよいが、秒を指定指定は最初に指定されたものが duration 、後に指定された、ものが delay となる。

transition :  transition-property transition-duration  transition-timing-function  transition-delay ;

↓↓まとめて書いた例
transition :  transition: all 1s linear 0s ;

サンプルデモ

■サンプルデモのHTML

<p>example</p>

■サンプルデモのCSS
アニメーションさせたいp要素に対して下のように、マウスオーバー時に横が長く縦が短くなるように指定し、transition でアニメーションの動きを指定します。

p{
    width:150px;
    height:50px;
    color:#fff;
    background-color:#ccc;
    text-align:center;
    line-height:50px;
    margin:20px ;

    -webkit-transition: all 1s ease 0s ;
    -moz-transition: all 1s ease 0s ;
    -o-transition: all 1s ease 0s ;
}
p:hover{
    width: 250px;
    height:20px;
    line-height:20px;    
}
​

その他のサンプルデモ

transformなどと組み合わせて使うとマウスオーバーで傾けたりもできます。