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

Question

我有一个在全宽度div中的未换行的一行文字。

是否可以动画化这个元素的文本对齐方式，使文本移动到给定的侧边/中心位置 - 我知道我可以测量宽度并使用相对/绝对定位，但我认为这不是直接的解决方案，也可能导致一些响应问题?

这里是还没有动画的演示。

- Adam Pietrasiak

---

试试这个 ;) - Milan and Friends

@mdesdev center 不是 text-align center... - benoît

Answer 1

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

希望这可以帮到您...

- Karim AG

---

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

Answer 2

今天我需要类似的东西。我想要一个按钮，它以右对齐的文本开始，但在悬停/聚焦时将文本动画到中心。

这是我想出来的方法。我发现几个答案的问题在于它们会动画“位置”，这是性能不佳的。我只想使用“transform”。虽然这需要很多标记来使按钮文本居中，但看起来效果不错。

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" />

- Bart

---

@Brat 这很聪明! 如果您能编辑您的答案并描述一下您在这里进行的主要技巧——将外部容器的50%转换为一侧，然后将子容器的50%转换为另一侧，那就太好了。 - Adam Pietrasiak

Answer 3

也许使用JavaScript创建跑马灯会对你有所帮助？<marque>标签不是最好的选择，但也许js跑马灯更适合你。 Marquee（带可选的开始/停止按钮）

更新：我理解到跑马灯可能不是你需要的最佳方案，因此我提出了另一种解决方案，使用margin-left并改变其值。

右侧按钮的值取决于你在那里有多长的文本，但你可以始终检查元素宽度并在代码中进行调整。我已经更新了fiddle以考虑这种变化：final Fiddle

- scx

---

您想如何使用它来更改文本对齐方式？ - Adam Pietrasiak

我假设你想要将整个div中的文本动画到侧面，但在看了评论后似乎并非如此？ - scx

我确实想要，但我不知道如何判断何时开始-停止跑马灯或制作CSS缓动等？ - Adam Pietrasiak

我已更新答案。我已删除文本对齐，并使用 margin-left 实现了它。 - scx

你的另一个解决方案不够响应。无论如何，我很感激你的努力。 - Adam Pietrasiak

http://jsfiddle.net/LNfqj/10/ - 这是我的最终解决方案 - 只需要通过js管理一次，然后更改css类就足够了。 - Adam Pietrasiak