Как анимировать переход с помощью CSS3

Question

Я создал фальсификацию включения/выключения. Можно ли анимировать переход фона-фона/рамки влево/вправо?

На данный момент я использую только -webkit-transition:0.5s ease, чтобы исчезать в эффекте переключения, но в идеале я хочу, чтобы он выглядел как его переключенный влево/вправо.

Вот Fiddle из ниже:

$('.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.