CSS3 - animate text align left/center/right

Question

I\'ve got one line (not wrapped) text inside full width div.

Is it possible to animate this element text alignment so text moves to given

Answer 1

I needed something similar today. I wanted a button that started with text aligned to the right, but then animated the text to center on hover/focus.

Here is what I came up with. The problem I have with several of the answers I have found is that they animate "position", which is not very performant. I wanted to use only "transform". This is a lot of markup just for centering button text, but seems to work well.

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%);
}

  

    
      

        
Text 1
      
    
   
  

    
      

        
Text Two
      
    
   
  

    
      

        
Text Longer Three