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動畫使用它..你最好的拍攝將是定位（使用百分比單位保留響應力）。

希望這有助於...