html - 中心から特定の位置への CSS アニメーション

Question

テキストを水平方向の中央からページの左側から特定の距離に移動する CSS ベースのトランジションを作成しようとしています。私の現在のCSSは次のようになります（ターゲットは、テキストとクラス「タイトル」+「アニメーション」を含むdivです）：

.title {
  position: absolute;
  min-width: 100%;
  text-align: center;
}

.anim {
  animation: translate-title 2s linear;
}

@keyframes translate-title {
  0% {
    min-width: 100%;
    left: 0px;
  }

  100% {
    min-width: 0;
    left: 50px;
  }
}

上記のコードの問題は、最小幅 0 がテキストの実際の任意の幅よりも小さいため、「左」による右へのシフトが完了する前に、「最小幅」による左へのシフトが完了することです。 . 最終的な結果は、削除したい明らかなバウンスです。

http://jsfiddle.net/62tQE/4/で chrome/ff を参照してください。

jsの使用を伴わない解決策を考えられる人はいますか?