Text align transition

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

by trolleymusic

HTML

<p class="test">Hello</p>

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

CSS

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

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

#switch {
    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);