Text align transition

You can't transition text-align! http://www.w3.org/TR/css3-transitions/#animatable-css

by trolleymusic

HTML

<ul class="test">
    <li>test 1</li>
    <li>test 2</li>
    <li>test 3</li>    
</ul>

<button id="switch">Switch</button>

<div class="test-two">
<ul>
    <li>test 1</li>
    <li>test 2</li>
    <li>test 3</li>    
</ul>
</div>
<button id="switch2">Switch</button>

CSS

.test,
.test-two {
    display: block;
    background: yellow;
    
    margin: 0;
    padding: 0;
    
    transition: all 1s ease-in-out;
    /*-webkit-transition: text-align 2s ease-in-out;*/
    
}

.test {
   text-align: center;
}

.test-two ul {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: auto;
    transition: all 1s ease-in-out;
}

.test li,
.test-two li {
    position: relative;
    display: inline-block;
    padding: 10px;
    background: lightblue;
}

.test.right {
    background: red;
    text-align: right;
}

.test-two.new-right {
    background: green;
}
.test-two.new-right ul {
    padding-left: 50%;
}

#switch,
#switch2 {
    display: block;
    max-width: 200px;
    margin: 10px auto;
}

JavaScript

document.getElementById('switch').addEventListener('click', function () {
    var p = document.getElementsByClassName('test')[0];
    p.className = p.className == "test" ? "test right" : "test"
}, false);

document.getElementById('switch2').addEventListener('click', function () {
    var p = document.getElementsByClassName('test-two')[0];
    p.className = p.className == "test-two" ? "test-two new-right" : "test-two"
}, false);