复选框的 CSS 过渡效果不起作用

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）复选框给我留下了深刻的印象，我遵循了他的教程：如何使用CSS设置复选框样式。不幸的是，过渡（我从教程中复制了 100%）不起作用。我也不知道为什么。这是我的整个代码，放在CSS Desk：CSS Desk Decoration复选框中。如果有人决定帮助我，我会很高兴 - 提前谢谢你。我的浏览器 - 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>