CSS3: webkit-transition

まずは こちら のCSSで重要な役割を果たしているwebkit-transitionの話。

これは以下のような構文です。

  • webkit-transition: <何を> <どれくらいの時間で> <どのように>

例えば
div.foo {
opacity: 1.0;
-webkit-transition: opacity 1s linear;
}
div.foo:hover {
opacity: 0.0;
}
と書いた場合、'foo'というクラスを持ったdiv要素にマウスを乗っけた場合（クリックはせずポインタを乗せた状態）１秒を書けてdiv要素が透明になって消えていきます。

これはについて<1秒>で<線形>に変化させる事を示しています。<どのように>については default, ease, ease-in, ease-out, ease-in-out, linearなどいろいろ有りますが違いについては、 このサイト を見るとよくわかると思います。

これから説明しますが、webkit-transformと組み合わせることでもっとダイナミックなことも可能です。

makeitsmartjp.com/amadana ではページの移動や商品イメージのスライドをwebkit-transition: marginで対応しています。

ぜひいろいろと試してみてください！！