CSS Transitions for checkbox not working - html

Question

I have this piece of HTML (placed on CSSDesk):
<section style="margin-top: 50px;">
<header style="margin-bottom: 30px;">My checkboxes</header>
<div class="checkbox">
<input type="checkbox" id="checkbox"/>
<label for="checkbox"></label>
</div>
</section>
And this piece of CSS, also placed on CSSDesk:
input[type="checkbox"]{
display: none;
}
.checkbox{
position: relative;
width: 60px;
height: 2px;
background-color: black;
border-radius: 10%;
}
.checkbox input[type="checkbox"] + label{
top: -10px;
cursor: pointer;
position: absolute; /*otherwise ,,left: x px;" isn't working*/
display: block;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: blue;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
.checkbox input[type="checkbox"]:checked + label{
left: 80%;
}
Impressed by Paul Underwood checkboxes I follow his tutorial: How To Style A Checkbox With CSS. Unfortunately, transition (I copied in 100% from tutorial) didn't work. And I don;t have any idea why. Here is my entire code, placed in CSS Desk: CSS Desk Decorative checkboxes. I will be pleased if anybody decides to help me - thank you in advance. My browser - Opera 25.0

Answer 1

You forgot to insert left: 0px in .checkbox label{...} class , because you expect that transition will be applied to transformation in x-Axis. Here is a working snippet.
input[type="checkbox"] {
display: none;
}
.checkbox {
position: relative;
width: 60px;
height: 2px;
background-color: black;
border-radius: 10%;
}
.checkbox label {
/*insert next line*/
left: 0px;
top: -10px;
cursor: pointer;
position: absolute;
/*otherwise ,,left: x px;" isn't working*/
display: block;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: blue;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
.checkbox input[type="checkbox"]:checked + label {
left: 80%;
}
<section style="margin-top: 50px;">
<header style="margin-bottom: 30px;">My checkboxes</header>
<div class="checkbox">
<input type="checkbox" id="checkbox" />
<label for="checkbox"></label>
</div>
</section>