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

The way I do it is to simply use text-indent instead of text-align. You have to do trial/error a little to figure out the number of px, rem, em, %, or whatever where you want to move the item via text-indent.

.tsetup
{
text-indent:0;
transition: text-indent 150ms linear;
}

.tright
{
text-indent:50px; /* adjust me by trial and error */
}

So, I can add the tsetup class to my element. When I click it, I add the tright class. When I click it again, I remove the tright class. It does a nice gradual fade from left to right.

I use this technique with the FontAwesome fa-circle icon (content:"\f111";font-family:FontAwesome;) to make a checkbox toggle slider button.