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

我用纯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创建动画\过渡非常陌生，有什么建议吗

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

我在代码中添加了一些更改： -我将文本移动到跨距，并使用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%; 
}