bootstrap progressbarの目盛りを線形に変化させたい

twitter bootstrapのプログレスバーの目盛りを連続的に変化させる処理を書いてるんだけど（ゲームキャラの行動タイマーです）、指定した値にビョイ～ンとした動きで移動してしまって困った。

もっと直線的な動きで変化してほしいんだよね・・。

以下のようにcssを設定すると直線的に変化する動きになってくれた。

/* html */
<div class="progress">
  <div id = "my_timer" class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
  </div>
</div>

/* css */
#my_timer{
  -webkit-transition: width 0s linear;
  -moz-transition: width 0s linear;
  -ms-transition: width 0s linear;
  -o-transition: width 0s linear;
  transition: width 0s linear;
}