css toggle switch - 在伪元素之间添加背景颜色的过渡

Question

我用纯 CSS 制作了一个开关切换复选框，Check it out .

现在我想用一些过渡动画它 - (让背景左右滑动，就像它一样 here )。但我真的不确定如何(我链接的那个例子使用不同的 html，我不打算改变我的)。

我试着做这样的事情:

@keyframes goleft {
  0%   { margin-right: 10px; text-indent: 10px; }
  50%  { margin-right: 22px; text-indent: 22px; }
  100% { margin-right: 35px; text-indent: 35px; }
}

// later: 
transition: goleft 1s infinite;

35px 是整个框宽度的一半，我认为背景会移动但文本会保留，我会为另一个方向制作另一个动画。但它没有用。

我对使用 css3 创建动画\转换还很陌生，有什么建议吗？

p.s. 如前所述，我不想在那里更改我的 html，也不想使用 javascript

Answer 1

FIXED DEMO

我在代码中添加了一些改动:- 我将文本移动到 span，并使用 before 元素作为移动过渡的背景。

you can see the fixed demo

label{
    position:relative;    
}

.switchbox input + label:before {
    transition:0.3s;
    content:""; display:block;
    width:50%;
    height:20px;
    position:absolute;
    left:0;
    top:0;
  background: #a5a5a5; /* W3C */    
}

.switchbox input:checked + label:before {
    left:50%; 
}