CSS3のtransitionプロパティは、CSSのプロパティ設定を時間経過による段階的な変化に変更する仕組みです。
通常はCSSのプロパティに値を設定すると、その設定は即座に反映されHTML要素の表示状態が（一度に）切り替わります。しかし、transitionを設定すると、その変化が「時間に応じて連続的に」なるわけです。
transitionプロパティは
transition: CSSプロパティ名 変化させる時間 変化の形 遅延時間
といった形で指定します。ちょっとした「動き」を付けるのなら、最初に変化させるCSSの属性、空白に続いて変化させる時間（msやs単位で指定）を設定すれば十分でしょう。
試しに、以下のCSSを設定して「backgroundを1600ミリ秒かけて変化させる」ボタンを作ってみましょう。
style="background: #cccccc; transition: background 1600ms;"
このスタイル設定を行った状態でJavaScriptからCSSのbackgroundプロパティを変更すると、背景色が灰色（#cccccc）から指定した色に1600ミリ秒かけて変化していきます。
続いて、transformにtransitionを適用してみます。transitionの3つめの引数には、時間変化の形を指定することができるので、こちらもあわせて試してみましょう。
3つめの引数は、指定なし（初期値）だと「ease（最初と最後の変化が減速される）」が設定された状態になっています。ここに「linear（直線的）「ease-in（最初はゆっくり）」「ease-out（最後はゆっくり）」「ease-in-out（最初と最後はゆっくり）」「cubic-bezier（ベジュ曲線のパラメータ指定）」の値を指定することができます。
とりあえず、linearを指定して「動き」の違いを見てみましょう。下のボタンは、いずれもtrasnsitionにtransformを指定した上で、ボタンをクリックするとtransformにtranslateX(100%)を設定するようにしています。ただ、上のボタンは第3引数の設定なし、下のボタンは第3引数にlinearを指定してみました。
最後に、遅延時間を入れて要素を動かしてみます。今度は、二つの要素を並べ一方には
transition: transform 1200ms linear;
として、transformの移動を1200msで行うように、またもう一方には
transition: transform 1200ms linear 1200ms;
として、1200msの遅延を設定してみました。これにより（二つの要素に同時にtransformを設定した場合）一方の移動が終わると同時にもう一方が動くようにしています。
ボタンクリックで設定するtransformの移動は、二つとも同じ「translateX(100%)」です。
移動ボタンをクリックすると、青色の箱が右に移動し、左の箱にぶつかると同時に左の箱が動き出す「玉突き」のような動きを確認できると思います。