Question

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

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

此处demo还没有动画。

Answer 1

text-align属性不可动画，因此您不能将其与css过渡一起使用，也不能与jquery动画一起使用。您的最佳镜头将是定位（使用百分比单位来保持响应度）。

希望这会有所帮助......

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

Answer 3

也许javascript创建的选框可以帮到你吗？ <marque>标签不是最好的方式，但也许js marquee会适合你。 Marquee (with optional start/stop buttons)

更新：据我所知，选框不是最适合您的需求我使用margin-left并改变其值来推出另一种解决方案。

右键的值取决于您在那里的文字长度，但您可以随时检查宽度elements width并调整代码。我已经更新了这个改变的小提琴：final Fiddle

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

3 个答案: