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

If I understand what you are going for, one way to do this is to change your layout a bit and animate left/right properties:

Working CodePen

This takes advantage of overflow being visible by setting the right of the span element to the left hand side of the screen.

On hover, right is set to 0, transitioning the element across the screen.

Note: in this case, when transitioning back to the left, you do lose a bit of the easing as it is transitioning all the way to zero rather than the natural width of the text.

.bg {
  background: black;
  width: 100%;
  height: 20px;
  position: relative;
}

.name {
  color: white;
  left: 0;
  position: absolute;
  text-align: right;
  right: 100%;
  -webkit-transition-property: all;
  -webkit-transition-duration: 2s;
}

.bg:hover .name {
  position: absolute;
  right: 0;
  left: 0;
}

  Adam