Checkbox with switch style full css animation

switcher.html

<div class="switcher">
  <input type="checkbox", name="wadus" id="wadus">
  <label for="wadus" class="switch"></label>
</div>

switcher.scss

.switcher {
  position: relative;
  display: inline-block;
  input {
    position: absolute;
    &:checked + .switch {
      background: #0077CC;
      &:after {
        animation: to-checked 0.35s ease-in forwards;
      }
    }
  }
  .switch {
    position: relative;
    display: block;
    width: 44px; height: 24px;
    border-radius: 12px;
    background: #E6E8EB;
    cursor: pointer;
    transition: all 0.3s ease;
    &:hover {
      box-shadow: inset 0 0 6px rgba(0,0,0,.25);
    }
    &:after {
      display: block;
      content: '';
      position: absolute;
      top: 3px; left: 3px;
      width: 18px; height: 18px;
      background: #FFF;
      border-radius: 9px;
      animation: to-unchecked 0.35s ease-in forwards;
    }
  }
}

@keyframes to-checked {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    width: 26px;
  }
  100% {
    transform: translate3d(20px, 0, 0);
  }
}

@keyframes to-unchecked {
  0% {
    transform: translate3d(20px, 0, 0);
  }
  50% {
    width: 26px;
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}