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

Question

我正在尝试编写一个基于 CSS 的转换，将文本从水平中心移动到页面左侧的特定距离。我当前的 CSS 看起来像这样（目标是带有文本和类 'title' + 'anim' 的 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 的 min-width 小于文本的实际任意宽度，因此由于 'min-width' 导致的左移在由于 'left' 导致的右移完成之前完成. 最终结果是明显的反弹，我想删除它。

在http://jsfiddle.net/62tQE/4/上查看 chrome/ff

谁能想到不涉及使用 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;
    }
}

小提琴