CSS transition: after not working
I am trying to create a custom radio button checkbox.
Here when its un-selected
and when it is selected
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
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
to0
you can try animating instead of the property left
from 0
to (100% - 24px)
usingcalc()
.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/
source to share