CSS3メモ「transition」の使い方

2010-05-10

CSS3のtransitionは指定した要素を動かすことができるプロパティです。transformと組み合わせると色々な動きをつけることができるようになります。
ただ、なんだか細かくて覚えきれないのでメモとして残しておきます。

対応ブラウザ

Safari
Google Chrome

現時点では-webkit-というベンダープリフィックスをつける必要があります。

使い方

基本設定

細かく指定する場合はこんな風に指定します。

-webkit-transition-property: all;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;

まとめて指定する場合はこんな感じ。

-webkit-transition: all 1s linear;

変化後の設定

どのように変化させたいか、については:hoverなどで指定します。

transition-property

transition-propertyはどのプロパティにtransitionを適用したいかを指定します。
allですべてのプロパティに適用させることもできます。カンマ区切りで複数のプロパティ（background-color,color）も指定可能です。

.demo {
    background-color: #FFF;
    -webkit-transition-property: background-color,color;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: linear;
}
.demo:hover {
   background-color: #2B3C45;
}

デモ

マウスオーバーすると1秒かけて背景色が白から青、文字色が黒から白に変化します。

マウスを乗っけてね

transition-duration

どれくらいの時間をかけて変化させるかを指定します。

デモ

transition-timing-function

変化のさせ方を指定します。といっても伝わらないと思うのでデモをみてください。

指定できる値

linear: 一定の速度で変化
ease-in: 最初はゆっくりとした変化ですが、最後になるにつれ激しく変化
ease-out: 最初は激しく、最後はゆっくりと変化
ease: ゆっくり始まり、途中で最高速になり、またゆっくりに戻る
ease-in-out: easeをもっとハッキリさせた感じ
cubic-bezier(): ベジェ曲線で変化を指定

デモ

default

linear

ease-in

ease-out

ease-in-out

cubic-bezier

.demo {
    transition-property: all;
    transition-durasion: 2s;
}

.linear {
    transition-timing-function: linear;
}
.ease-in {
    transition-timing-function: ease-in;
}
.ease-out {
    transition-timing-function: ease-out;
}
.ease {
    transition-timing-function: ease;
}
.ease-in-out {
    transition-timing-function: ease-in-out;
}
.cubic-bezier {
    transition-timing-function: cubic-bezier(0,1,1,0);
}

.demo:hover div {
    -webkit-transform: translate(400px,0);
}

Coder's Note