Animate using css when changing class

I am attempting to animate a property of the css for a form button using javascript by changing the class name. The property change is applied but is not animated and I cannot see why. Below is my code:


button {
    padding-right: 0px;
    transition: padding-right 2.5s;


button.inactive {
    padding-right: 0px;

} {
    padding-right: 100px;

javascript(for transitioning to active):

this.form.getElementsByTagName("button")[0].className ="active";

(for transitioning to inactive):

this.form.getElementsByTagName("button")[0].className ="inactive";

I mocked up an example using your code that you provided and the animated transition is happening without a problem - can been seen here,css,js,output