未应用CSS转换

我创建了一个简单的复选框开关，下面是一个JSFIDLE：正如您所注意到的，当您单击小圆跳跃时，我试图使它从左到右、从右到左平滑地移动。我尝试添加CSS转换，但没有成功。你知道我做错了什么吗

/*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;
}

---

正如Adrift在评论中所说，您无法将动画设置为

auto

但是，由于您说过宽度已设置，因此可以将动画设置为适合宽度的左侧值，如下所示

.switch input[type="checkbox"]:checked + span span {
    left: 23px;
    border: none;
}

此外，当选中复选框并将其悬停时，我添加了一个更改

左

位置的选项

不需要带前缀的

边框半径

，因为

-moz border radius

从来都不是什么东西，不支持

边框半径

的浏览器也不支持过渡或类似的东西

---

还有，

！重要信息

s不需要，如果选择器具有更高的优先级或相同的优先级，但位于样式表的较低位置，则样式将自动被覆盖。这是因为CSS是一种级联语言，这意味着如果可以，样式将应用于以前的样式<代码>！重要提示应尽量避免，因为当项目变大时，它会导致问题，因此

您不能像使用

left:auto那样从数值转换为关键字span

的宽度是静态的吗？是的，我只想在选中时将其向右移动，不选中时将其向左移动。谢谢！这就解决了问题，但是你确定-moz边界半径吗？所以我只需要使用边界半径？删除-webkit边框半径和-moz边框半径？