CSS3トランジション方法、ラジオ選択ボタン用

Question

CSS3で現在使用しているフェードイン/アウトエフェクトではなく、CSS3でスライドエフェクトでトランジションしたいラジオボタンがあります。

純粋にCSS3で行うことはできますか？私はjQueryを使いたくないので、できるだけシンプルできれいにしておきたい。

ありがとうございます。彼が選択したオプションをマーク白い丸い四角形になるよう

body { 
 
    font: 16px Arial, sans-serif; 
 
    background-color: #e0e0e0; 
 
} 
 
/* Hiding Radio */ 
 

 
input[type="radio"] { 
 
    display: none; 
 
} 
 
/* switch-bar */ 
 

 
.switch-canvas { 
 
    width: 200px; 
 
    margin: 50px auto; 
 
    height: 40px; 
 
    padding: 5px; 
 
    background-color: #000; 
 
    font-size: 0; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 
label { 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    width: 50%; 
 
    height: 40px; 
 
    color: #222; 
 
    line-height: 40px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    transition: all 0.3s; 
 
    -webkit-transition: all 0.3s; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 
input[type="radio"]:checked + label { 
 
    background-color: #fff; 
 
    color: green; 
 
    border-radius: 2px; 
 
}

<div class="switch-canvas"> 
 
    <input type="radio" id="female" name="sex" checked="" /> 
 
    <label for="female">Female</label> 
 
    <input type="radio" id="male" name="sex" /> 
 
    <label for="male">Male</label> 
 
</div>

Answer 1

私はラジオボタンの後にスパンを追加しました。

body { 
 
    font: 16px Arial, sans-serif; 
 
    background-color: #e0e0e0; 
 
} 
 
/* Hiding Radio */ 
 

 
input[type="radio"] { 
 
    display: none; 
 
} 
 
/* switch-bar */ 
 

 
.switch-canvas { 
 
    width: 200px; 
 
    margin: 50px auto; 
 
    height: 40px; 
 
    padding: 5px; 
 
    background-color: #000; 
 
    /*font-size: 0;*/ 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
    position:relative; 
 
} 
 
label { 
 
    position: relative; 
 
    z-index:1; 
 
    float:left; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    width: 50%; 
 
    height: 40px; 
 
    color: #222; 
 
    line-height: 40px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 
/*label { 
 
display: inline-block; 
 
font-size: 16px; 
 
font-weight: bold; 
 
width: 50%; 
 
height: 40px; 
 
color: #222; 
 
line-height: 40px; 
 
text-align: center; 
 
cursor: pointer; 
 
transition: all 0.3s; 
 
-webkit-transition: all 0.3s; 
 
-webkit-border-radius: 5px; 
 
-moz-border-radius: 5px; 
 
border-radius: 5px; 
 
}*/ 
 
input[type="radio"]:checked + label { 
 
    /*background-color: #fff;*/ 
 
    color: green; 
 
    /*border-radius: 2px;*/ 
 
} 
 

 
span { 
 
    position:absolute; 
 
    top: 5px; 
 
    left: 5px; 
 
    width: 50%; 
 
    height: 40px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    transition: all 0.3s; 
 
    -webkit-transition: all 0.3s; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
    background-color: #fff; 
 
    transform:translate(0); 
 
} 
 

 
#male:checked ~ span { 
 
    transform:translateX(100%); 
 
    left:-5px; 
 
}

<div class="switch-canvas"> 
 
    <input type="radio" id="female" name="sex" checked="" /> 
 
    <label for="female">Female</label> 
 
    <input type="radio" id="male" name="sex" /> 
 
    <label for="male">Male</label> 
 
    <span></span> 
 
</div>

http://jsbin.com/tazahek/edit?html,css

それはIE8に取り組んでいないと、（明らかに）