input(type='checkbox')#toggle
label(for='toggle').wrapper
  .burger
View Compiled
$col: #fff

html, body
  background: ROYALBLUE
  overflow: hidden

.wrapper
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  margin: auto
  width: 100px
  height: 100px
  cursor: pointer
  //background: #ccc
  //border-radius: 100%
  //overflow: hidden
  //transform: translateZ(0)
  
.burger
  height: 20%
  width: 100%
  top: 40%
  &, &::before, &::after
    position: absolute
    display: block
    background: $col
    border-radius: 100%/50%
    transform: translateZ(0)
  &::before, &::after
    width: 100%
    height: 100%
    content: ''
  &::before
    bottom: 200%
  &::after
    top: 200%
  
  #toggle:checked + .wrapper &
    animation: moveC .4s forwards
    &::before
      animation: moveT .4s forwards
    &::after
      animation: moveB .4s both .2s

  #toggle + .wrapper &
    animation: moveCB .2s .2s both
    &::before
      animation: moveTB .4s both
    &::after
      animation: moveBB .4s both

    
@keyframes moveC
  100%
    background: transparent

@keyframes moveT
  49.99999%
    transform: translateX(100%) translateZ(0)
  50%
    opacity: 0
    transform: translateY(200%) rotate(45deg) translateZ(0) translateX(-100%)
  100%
    opacity: 1
    transform: translateY(200%) rotate(45deg) translateZ(0) translateX(0%)

@keyframes moveB
  49.99999%
    transform: translateX(100%) translateZ(0)
  50%
    opacity: 0
    transform: translateY(-200%) rotate(-45deg) translateZ(0) translateX(-100%)
  100%
    opacity: 1
    transform: translateY(-200%) rotate(-45deg) translateZ(0) translateX(0%)    

@keyframes moveCB
  0%
    background: transparent
  50%
    background: $col
  100%
    background: $col

@keyframes moveTB
  0%
    transform: translateY(200%) rotate(45deg) translateZ(0) translateX(0%)
  50%
    transform: translateY(200%) rotate(0deg) translateZ(0) translateX(0%)
  100%
    transform: translateZ(0)

@keyframes moveBB
  0%
    transform: translateY(-200%) rotate(-45deg) translateZ(0) translateX(0%)
  50%
    transform: translateY(-200%) rotate(0deg) translateZ(0) translateX(0%)
  100%
    transform: translateZ(0)
  
  
#toggle
  display: none

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.