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

Question

我有单行（未包裹）全宽div内的文本。

是否有可能进行动画这个元素text alignment所以文本移动到指定的边/中心 - 我知道我可以mensure宽度和使用relative/absolute positioning，但我不觉得它直接解决方案，它也可能会导致一些问题作出响应？

这里是demo没有动画呢。

Answer 1

我今天需要类似的东西。我想要一个以文字开头的按钮对齐右侧的按钮，然后将文本动画化以悬停/聚焦为中心。

这是我想出来的。我发现的几个答案中存在的问题是，它们动画“位置”，即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 2

也许JavaScript创建的字幕会帮助你在这里？ <marque>标记不是最好的方法，但也许js字幕会适合你。 Marquee (with optional start/stop buttons)

更新：据我所知，选框不会最好满足您的需求，我用另一个解决方案使用margin-left并更改其值。

右按钮的值取决于文本的长度，但您始终可以检查宽度elements width并在代码中进行调整。我已经更新在考虑变革的小提琴：final Fiddle

Answer 3

text-align属性不是动画，所以你不能用CSS过渡，也不与jQuery动画使用它..你最好的拍摄将是定位（使用百分比单位保留响应力）。

希望这有助于...