title: CSS Toggle transition animation
body: <p>I have 2 CSS toggle buttons I am making. Right now when you click the button has a fade in and out effect. I want to to act more like a sliding from right to left animation. Attached is the HTML, CSS and a l ink to a fiddle with my code. Thank you! <a href="https://jsfiddle.net/ebgpqvha/" rel="nofollow">https://jsfiddle.net/ebgpqvha/</a></p>
  
  <pre><code>&lt;div class="switch-field"&gt;
    &lt;div class="switch-title"&gt;Hand:&lt;/div&gt;
    &lt;input type="radio" id="switch_left" name="switch_2" value="yes" checked/&gt;
    &lt;label for="switch_left"&gt;L&lt;/label&gt;
    &lt;input type="radio" id="switch_right" name="switch_2" value="no" /&gt;
    &lt;label for="switch_right"&gt;R&lt;/label&gt;
  &lt;/div&gt;
  
  
         .switch-field, .switch-field2 {
        font-family: "adiHaus", Arial, sans-serif;
        font-size: 16px;
          font-weight: 300;
          margin: 0.2em;
          overflow: hidden;
      }       
  
  
      .switch-title {
        margin-bottom: 6px;
      }       
  
      .switch-field input, .switch-field2 input {
        display: none;
      }       
  
  
      .switch-field label, .switch-field2 label {
        float: left;
      }       
  
  
      .switch-field label {
        display: inline-block;
        width: 63px;
        height: 40px;
        background-color: #EFEFEF;
        color: #cdcdcd;
        font: 16px "adiHaus",Arial,sans-serif;
        font-weight: bold;
        text-align: center;
        text-shadow: none;
        padding: 10px 14px;
        border: 1px solid rgba(0, 0, 0, 0.2);
       border-top: #CCC solid 1px;
       border-radius: 2px;
          border-bottom: #EEE solid 1px;
          border-right: #ddd solid 1px;
          border-left: #ddd solid 1px;
        -webkit-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
        transition:         all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
      }       
  
      .switch-field2 label {
        display: inline-block;
        width: 113px;
        height: 40px;
        background-color: #EFEFEF;
        color: #cdcdcd;
        font: 16px "adiHaus",Arial,sans-serif;
        font-weight: bold;
        text-align: center;
        text-shadow: none;
        padding: 10px 14px;
        border: 1px solid rgba(0, 0, 0, 0.2);
       border-top: #CCC solid 1px;
       border-radius: 2px;
          border-bottom: #EEE solid 1px;
          border-right: #ddd solid 1px;
          border-left: #ddd solid 1px;
       -webkit-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
        transition:         all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
      }       
  
      .switch-field label:hover, .switch-field2 label:hover {
        cursor: pointer;
      }       
  
      .switch-field input:checked + label, .switch-field2 input:checked + label {
        background-color: #fff;
        -webkit-box-shadow: none;
        box-shadow: none;
        color:000;
        font-weight: bold;
      }       
  
      .switch-field label:first-of-type, .switch-field2 label:first-of-type {
      border-right: none;
      }       
  
      .switch-field label:last-of-type, .switch-field2 label:last-of-type {
      border-left: none;
      }
  </code></pre>