Is it possible to transition text-alignment using CSS3 only?

Question

Is it possible to transition text-alignment using css3? For example, I\'d like to animate text-alignment from left to right, however, adding a transition property on text-al

Answer 1

This is an old question but I recently had the same issue and found the answers here unsatisfying for my use case.

The biggest concern I have with the solution from dc5 is that it uses the slow position properties for animation which is bad for transitions as they require re-layouting and are not hardware-accelerated.

My solution is solely based on transform: transitionX() and leverages the fact that translate() is always based on the target element's width/height:

This is my solution:

setTimeout(function() {
  $('.b').addClass('left');
}, 5000);

.b {
  transform: translateX(50%);
  transition: transform ease-in-out 1000ms;
}
.c {
  display: inline-block;
  transform: translateX(-50%);
  background: green;
  transition: transform ease-in-out 1000ms;
}
.b.left,
.b.left .c {
  transform: translateX(0%);
}

  
CENTERED TEXT