transition 属性は、transition-property、transition-duration、transition-timing-function、transition-delay によるトランジション(遷移)に関わるパラメータをまとめて指定します。:hover を用いると、マウスを乗せた時のスタイルを指定することができますが、トランジションを用いることにより変化にかける時間などを制御することが可能となります。transition に指定する値は省略可能で順不同ですが、時間と解釈される値は一つ目が transition-duration で、二つ目が transition-delay と解釈されます。

animation によるアニメーションがページを開いた際に開始するのに対し、トランジションは、ページを開いたのちに発生する :hover などの契機で開始します。:hover の他には、:checked、:active、:target、:focus や、jQuery などで要素にクラスを追加する場合の変化にも適用されます。

下記の例では、:hover によって width が変化するのを、0.2秒で変化するように指定しています。

.test {
  width: 100px;
  height: 30px;
  background: #f66;
  transition: 0.2s;
}
.test:hover {
  width: 300px;
}

<div class="test"></div>

下記の様にカンマで複数指定することで、width は 0.2秒、height は 0.4秒で変化させることもできます。

  transition: width 0.2s, height 0.4s;

任意のタイミングでトランジッションを発動させるには、jQuery などを用いてクラスを追加・削除します。

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<style>
#box {
  width: 30px;
  height: 30px;
  background: #f66;
  transition: 0.2s;
}
#box.box-open {
  width: 300px;
}
</style>
<script>
function openBox() {
  $('#box').addClass('box-open');
}
function closeBox() {
  $('#box').removeClass('box-open');
}
</script>
<button type="button" onclick="openBox()">Open</button>
<button type="button" onclick="closeBox()">Close</button>
<div id="box"></div>

• http://www.w3.org/TR/css3-transitions/#transition-shorthand-property
• https://developer.mozilla.org/ja/docs/Web/CSS/transition
• http://caniuse.com/#feat=css-transitions