CSS transition: after not working

I am trying to create a custom radio button checkbox.

Here when its un-selected

enter image description here

and when it is selected

enter image description here

What's good other than CSS transition doesn't work and the transition toggles when toggled, although I use:

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


I put together a JSfiddle here: http://jsfiddle.net/awLdbzec/4/


source to share

1 answer

You cannot perform transitions from / to properties, the value of which auto

and in your example you change the value left

from 0

to auto

and the value right

from auto


you can try animating instead of the property left

from 0

to (100% - 24px)


.switch input:checked + span:after {
    background-color: #fff;
    left: -webkit-calc(100% - 24px);       
    left: calc(100% - 24px);

/* for the 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/



All Articles