CSS :after 上的过渡不工作

Question

我正在尝试创建自定义开关复选框。

这是未选中时的样子

当它被选中时

除了 CSS 转换不起作用，开关跳动，即使我正在使用：

    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -ms-transition: all .1s linear;
    -o-transition: all .1s linear;
    transition: all .1s linear;

我在这里整理了一个 JSfiddle：http://jsfiddle.net/awLdbzec/4/

Answer 1

您不能执行值为 auto 的转换 from/to 属性在您的示例中，您将 left 值从 0 更改为 auto，将 right 值从 auto 更改为 0

您可以尝试使用 calc()

从 0 到 (100% - 24px) 代替 left 属性设置动画

.switch input:checked + span:after {
    background-color: #fff;
    left: -webkit-calc(100% - 24px);       
    left: calc(100% - 24px);
}

/* for the hover effect */   
.switch input:checked + span:hover:after {
    width: 30px;
    left: -webkit-calc(100% - 30px);
    left: calc(100% - 30px);
}

示例：http://jsfiddle.net/awLdbzec/5/

CSS :after 上的过渡不工作

CSS transition on :after is not working

html

css

css-transitions