-webkit-transition-property

-webkit-transition-property（以下、すべて-webkit-transition を省きます）は、なんのプロパティが変化の対象になるか、を指定します。サンプルではallなのですべての変化が対象です。

個別に指定する場合は、通常の CSS プロパティで指定します。例えば height や background-color などが一番使われそうでしょうか。（実際のサンプルも、height と background-color だけ変化させています）

-webkit-transition-duration

duration は、変化が起きるとき、どれくらいの時間をかけて変化するのか、その時間を "秒数" で指定します。サンプルの場合は 1 秒かけて変化が起きる指定です。
つまり、:hover 疑似クラスで背景の色が白から赤に変わる用に指定していた場合、マウスオーバー時に白から 1 秒かけて赤に変化していくことになります。（イメージとしては時間的なグラデーション？）

たとえばこれを透明度に応用すれば、徐々に消えていく演出や、徐々に現れる演出などにも使えます。
これを現状で実装しようとすると、prototype.js と scriptaculous.js などを組み合わせたりして JavaScript で実装するしかありません。

-webkit-transition-timing-function

最後に timing-function。
これは、効果の加速度などを制御するプロパティとなります。
Flash を作ったことがある人なんかは、イージングの指定というとわかりやすいと思います。
イージングとは（自分的解釈なので間違ってたらすいません；）、効果の度合の時間配分を行う設定です。

一定時間と設定すると、効果は単調で一定のスピードで変化します。
これを、最初を早く、終わりを遅く、という設定にすると、まるで車がブレーキをかけたような感じで変化します。（最初は早く変化し、終わりに近づくにつれて変化が少なくなっていく感じ）n

以上が先日参加した CSS Reloaded で覚えてきた驚きの CSS プロパティです。（ほんとは他にもあるけど、これが一番興奮した）
今回は説明だけにとどめて、次回はこれを応用してちょっと面白い効果を作ってみたいと思います。