html - CSS transition on :after is not working -

i trying create custom switch checkbox.

here when un-selected

and when selected

which okay apart css transition not working, , switch jumps when toggling though using:

    -webkit-transition: .1s linear;     -moz-transition: .1s linear;     -ms-transition: .1s linear;     -o-transition: .1s linear;     transition: .1s linear; 

i have put jsfiddle here: http://jsfiddle.net/awldbzec/4/

you cannot transitions from/to properties value auto , in example you're changing left value 0 auto , right value auto 0

you can try animating instead left property, 0 (100% - 24px) using calc()

.switch input:checked + span:after {     background-color: #fff;     left: -webkit-calc(100% - 24px);            left: calc(100% - 24px); }  /* hover effect */    .switch input:checked + span:hover:after {     width: 30px;     left: -webkit-calc(100% - 30px);     left: calc(100% - 30px); } 

example : http://jsfiddle.net/awldbzec/5/