从中心到特定位置的CSS动画

Question

我正在尝试编写一个基于CSS的转换，将文本从水平中心移动到页面左侧的特定距离。我当前的CSS如下（目标是div，带有文本和类"title"+"anim"）：

.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的最小宽度小于文本的实际任意宽度，因此由于"最小宽度"而向左移动的操作在由于"左"而向右移动的操作完成之前完成。最终的结果是一个明显的反弹，我想消除它。

查看chrome/ffhttp://jsfiddle.net/62tQE/4/

有人能想出一个不需要使用js的解决方案吗？

Answer 1

我从动画中删除了left，并将padding和box-sizing添加到.title:

.title {
    position: absolute;
    min-width: 100%;
    text-align: center;
    width: auto;
    padding: 0 50px;
    box-sizing: border-box;
}
.anim {
    -webkit-animation: translate-title 2s linear;
    -webkit-animation-fill-mode: forwards;
    animation: translate-title 2s linear;
    animation-fill-mode: forwards;
}
@-webkit-keyframes translate-title {
    0% {
        min-width: 100%;
    }
    100% {
        min-width: 0;
    }
}
@keyframes translate-title {
    0% {
        min-width: 100%;
    }
    100% {
        min-width: 0;
    }
}

FIDDLE