如何使用 CSS3 对切换过渡进行动画处理

Question

我创建了一个虚假的开/关切换标记。是否可以将背景颜色/边框的过渡动画化为向左/向右滑动？

目前，我只使用-webkit-transition:0.5s ease来淡入切换效果，但理想情况下，我希望它看起来像左/右切换。

以下是以下内容的小提琴：

$('.btnFauxLink').click(function() {
  $('.btnFauxLink').removeClass('selected');
  $(this).toggleClass('selected');
});

.autoRefreshSetting {
  border: 0;
  color: #999;
  font-weight: normal;
  margin: 1em 0 1.2em;
  padding: 0
}
.autoRefreshSetting .btnFauxLinkContainer {
  /*background:url(img/sprite-skin-article.png) -557px -322px;*/
  background: #f8f8f8;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 1px #D4D4D4;
  -webkit-box-shadow: inset 0 1px 0 1px #D4D4D4;
  -moz-box-shadow: inset 0 1px 0 1px #D4D4D4;
  display: inline-block;
  margin: 0 5px;
  padding: 2px 0 0
}
.autoRefreshSetting .btnFauxLinkContainer .btnFauxLink {
  border: 1px solid transparent;
  color: #666;
  font-size: 15px;
  font-weight: normal;
  margin: -2px 0 0;
  padding: 3px;
  text-transform: uppercase;
  vertical-align: text-top
}
.autoRefreshSetting .btnFauxLinkContainer .selected {
  background: #e7e7e7;
  background: -moz-linear-gradient(top, #ffffff 0%, #fafafa 29%, #ebebeb 79%, #e7e7e7 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(29%, #fafafa), color-stop(79%, #ebebeb), color-stop(100%, #e7e7e7));
  background: -ms-linear-gradient(top, #ffffff 0%, #fafafa 29%, #ebebeb 79%, #e7e7e7 100%);
  background: linear-gradient(top, #ffffff 0%, #fafafa 29%, #ebebeb 79%, #e7e7e7 100%);
  border: 1px solid #d4d4d4;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #333
}
#autoRefreshOff {
  margin-left: -4px
}
.btnFauxLink {
  -webkit-transition: 0.5s ease
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="autoRefreshSetting"> <span class="btnFauxLinkContainer">
        <button class="btnFauxLink" type="button" id="autoRefreshOn">on</button>
        <button class="btnFauxLink selected" type="button" id="autoRefreshOff">off</button>
    </span> 
</div>

Answer 1

我没有直接回答你的问题，主要是因为我不想让你的CSS代码可读，但我可以告诉你，这是可能的，因为我几个月前用纯CSS3已经这样做了。如果你有兴趣=> https://secure.anonsphere.com/files/yesno.php。