CSS Transition is not being applied - css

Question

I have created a simple check-box switch, here is a JSFiddle: http://jsfiddle.net/aseVX as you have noticed, when you click the little circle jumps, i am trying to make it smoothly shift from left to right and right to left. I tried adding CSS transition and that didn't make it work. Any ideas of what I am doing wrong?
/*Checkbox Switch*/
.switch p, .switch label {
display: inline;
}
.switch label {
margin-left: 10px;
}
.switch label > span {
background-color: rgba(0, 0, 0, 0.1);
border: 1px solid #A6A6A6;
width: 50px;
height: 30px;
position: relative;
display: inline-block;
vertical-align: middle;
cursor: pointer;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
-ms-transition: all .15s linear;
-o-transition: all .15s linear;
transition: all .15s linear;
}
.switch input[type="checkbox"]:checked + span {
background-color: #316C94;
border: 1px solid rgba(0, 0, 0, 0.4);
}
.switch span span {
background-color: #fff;
border: 1px solid #A6A6A6;
width: 24px;
height: 24px;
position: absolute;
top: 2px;
left: 2px;
cursor: pointer;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-webkit-transition: all .15s ease;
-moz-transition: all .15s ease;
-ms-transition: all .15s ease;
-o-transition: all .15s ease;
transition: all .15s ease;
}
.switch label > span:hover span {
width: 30px;
}
.switch input[type="checkbox"]:checked + span span {
right: 2px;
left: auto;
border: none;
}
/*Checkbox Switch > Disabled*/
.switch input[type="checkbox"]:disabled + span {
background-color: rgba(0, 0, 0, 0.1) !important;
border: 1px solid #A6A6A6 !important;
}
.switch input[type="checkbox"]:disabled + span span, .switch input[type="checkbox"]:disabled + span span:hover {
background-color: #fff !important;
border: 1px solid #A6A6A6 !important;
width: 24px !important;
}

Answer 1

As Adrift said in the comments, you cannot animate to a state of auto
But, since you said the width is set, you can animate to the left value that fits the width like so
.switch input[type="checkbox"]:checked + span span {
left: 23px;
border: none;
}
Demo
In addition I added a change the left position when the checkbox was checked and it was hovered
The prefixed versions of border-radius are not needed because -moz-border-radius was never a thing and browsers that don't support border-radius will not support transitions or anything like that either
Also, the !importants are not needed, if the selector is has a higher precedence or the same precedence but is further down the stylesheet, the styles will automatically be overridden. This is because CSS is a cascading language, meaning styles will apply over previous ones if they can. !important should try to be avoided as it causes issues when projects get large and such