CSS切换开关-添加过渡背景颜色之间的伪元素

Question

我用纯css做了一个切换复选框，看看吧。

现在我想用一些过渡来动画它(让背景左右滑动，就像这里一样)。但我真的不确定如何(我链接的例子使用不同的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，有什么建议吗?

注。如前所述，我不想改变这里的html，也不想使用javascript

Answer 1

修正DEMO

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

你可以看到固定的演示

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%; 
}