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;
  }
}

上面代码的问题是 min-width 为 0 小于文本的实际任意宽度，因此由于 'min-width' 引起的左移在由于 ' 引起的右移之前完成左'完成。最终结果是明显的反弹，我想将其移除。

在 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;
    }
}

FIDDLE