CSS3 - 动画文本左/中/右对齐答案

【问题标题】：CSS3 - animate text align left/center/rightCSS3 - 动画文本左/中/右对齐
【发布时间】：2017-10-28 06:31:25
【问题描述】：

我在全宽 div 中有 一行（未换行） 文本。

是否可以为这个元素设置动画 text alignment，以便文本移动到给定的边/中心 - 我知道我可以测量宽度并使用 relative/absolute positioning，但我没有找到直接的解决方案，它也可能导致一些响应问题？

这里是demo，还没有动画。

【问题讨论】：

试试this ;)
@mdesdev center 不是文本对齐中心...

标签： html css css-animations

【解决方案1】：

text-align 属性不可动画化，因此您不能将它与 css 过渡或 jquery animate 一起使用。您最好的方法是定位（使用百分比单位来保持响应性）。

希望这会有所帮助...

【讨论】：

好的，我明白了。无论如何，百分比对响应性没有帮助，因为容器宽度会发生变化，但文本字体大小>文本本身的宽度将保持不变

【解决方案2】：

我今天需要类似的东西。我想要一个以向右对齐的文本开头的按钮，然后将文本设置为以悬停/焦点为中心。

这是我想出的。我发现的几个答案的问题是它们为“位置”设置动画，即not very performant。我只想使用“转换”。这是很多仅用于居中按钮文本的标记，但似乎效果很好。

body {margin: 0}
ul, li {
  margin: 0;
  padding: 0;
}
li {
  width: 30%;
  padding: 10px 0;
}
button {
  width: 100%;
  height: 50px;
  margin: 0;
}
.center-line {
  position: absolute;
  width: 2px;
  height: 100%;
  background: lightgray;
  left: 15%;
  top: 0;
}

.outer {
  text-align: right;
  transition: 200ms transform;
}
.inner {
  display: inline-block;
  transition: 200ms transform;
}

button:hover .outer {
  transform: translateX(-50%);
}
button:hover .inner {
  transform: translateX(50%);
}

<ul>
  <li>
    <button>
      <div class="outer">
        <div class="inner">Text 1</div>
      </div>
    </button>
   </li>
  <li>
    <button>
      <div class="outer">
        <div class="inner">Text Two</div>
      </div>
    </button>
   </li>
  <li>
    <button>
      <div class="outer">
        <div class="inner">Text Longer Three</div>
      </div>
    </button>
   </li>
</ul>
<span class="center-line" />

【讨论】：

@Brat 太聪明了！如果你能编辑你的答案并描述你在这里做的一个主要技巧会很棒 - 将外部支架的一侧转换为 50%，将儿童支架的另一侧转换为 50%。

【解决方案3】：

也许 javascript created marquee 会帮助你？ <marque> 标签不是最好的方法，但也许 js marquee 会适合你。 Marquee (with optional start/stop buttons)

更新：据我了解，marquee 不会最适合您的需求，我提出了另一种使用 margin-left 并更改其值的解决方案。

右键的值取决于您在那里的文本长度，但您始终可以检查宽度elements width 并在代码中进行调整。我已经根据这种变化更新了小提琴：final Fiddle

【讨论】：

您想如何使用它来更改文本对齐方式？
我假设您想通过整个 div 将您的文本设置为动画，但在评论之后看起来情况并非如此？
我确实想要，但我不知道你怎么知道什么时候开始 - 停止 Marquee 或让 css 缓动等？
我已经更新了答案。我已经删除了 text-alignment 并使用 margin-left 来实现。
您的其他解决方案没有响应 :) 无论如何，我很高兴您的努力。