%input{:type => "checkbox"}/
.wrap
 .toggle
  .outer
   .line
   -2.times do
    .ball

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #000;
  input {
    position: absolute;
    width: 150px;
    height: 70px;
    z-index: 999;
    left: calc(50% - 75px);
    top: calc(50% - 35px);
    opacity: 0;
    &:checked {
      & ~ .wrap {
        .toggle {
          transition-delay: 0.5s;
          transform: translateX(80px) rotate(360deg);
        }
        .outer {
          .ball {
            animation: bounce 2s ease-in-out 1 forwards;
          }
        }
      }
    }
  }
  .wrap {
    width: 150px;
    height: 70px;
    position: relative;
    border-radius: 100px;
    box-shadow: 0 0 0 5px #000, 0 0 0 10px #fff;
    background: #fff;
  }
  .toggle {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 10px;
    left: 10px;
    transition: 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.125);
  }
  .outer {
    width: 50px;
    height: 50px;
    position: absolute;
    overflow: hidden;
    box-shadow: inset 0 0 0 5px #000, 0 0 0 5px #000;
    border-radius: 100%;
    top: 0;
    left: 0;
    .line {
      position: absolute;
      height: 100%;
      width: 100%;
      bottom: 0;
      left: 0;
      background: linear-gradient(to bottom, #fff 50%, #000 50%);
      border-radius: 100%;
    }
    .ball {
      position: absolute;
      width: 50%;
      height: 10px;
      top: calc(50% - 10px);
      left: 0;
      border-radius: 150% 150% 0 0 / 300% 300% 0 0;
      background: #fff;
      mix-blend-mode: difference;
      transform-origin: bottom;
      &:nth-of-type(2) {
        left: auto;
        right: 0;
        top: 50%;
        border-radius: 0 0 150% 150% / 0 0 300% 300%;
        transform-origin: top;
      }
      transform: scaleY(0) skewX(40deg);
      @keyframes bounce {
        25% {
          transform: scaleY(-1.5) skewX(40deg);
        }
        55% {
          transform: scaleY(1.5) skewX(60deg);
        }
        60% {
          transform: scaleY(0) skewX(40deg);
        }
        66% {
          transform: scaleY(-0.75) skewX(70deg);
        }
        72% {
          transform: scaleY(0) skewX(40deg);
        }
        100% {
          transform: scaleY(0) skewX(40deg);
        }
      }
    }
  }
}