text alignment transition help

Question

https://code.sololearn.com/WJCTVgWlvfih/?ref=app
how I can make this text slowly align center and if i click again slowly it should align left. Text alignment property is not affected by transition. what should I do?

Answer 1

text-align is not an animatable property

https://www.w3schools.com/cssref/css_animatable.asp

A work-around is to put the text in an invisible div that stretches from zero to 100% width within the div that changes color, as demonstrated in the top solution here:

https://stackoverflow.com/questions/18235764/is-it-possible-to-transition-text-alignment-using-css3-only