CSS Transitions для флажка не работает

Question

У меня есть этот кусок HTML (размещенный на 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> 

И этот кусок CSS, также размещен на 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%; 
} 

впечатлен Paul Underwood checkboxes I следуйте его учебнику: How To Style A Checkbox With CSS. К сожалению, переход (я скопировал в 100% от учебника) не работал. И я не знаю, почему. Вот мой весь код, помещенный в CSS Desk: CSS Desk Decorative checkboxes. Я буду рад, если кто-нибудь решит помочь мне - спасибо заранее. Мой браузер - Opera 25.0

Answer 1

Вы забыли вставить left: 0px в класс .checkbox label{...}, потому что вы ожидаете, что переход будет применен к преобразованию в оси x. Вот рабочий фрагмент.

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>