A Pen by Perthz.

CSS-Animated-Sandwich-Icon.markdown

CSS Animated Sandwich Icon

After seeing Apple Inc. did this, I just want to do the simple version using only CSS.

A Pen by Perthz on CodePen.

License.

index.haml

#sandwich
  .sw-topper
  .sw-bottom

style.stylus

body {background-color: #333;}

#sandwich 
  width: 100px
  height: 100px
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;




.sw-topper
    position: relative
    top: 0
    width: 100px; 
    height: 10px;
    background: rgb(255, 255, 255);
    border: none; 
    border-radius: 4px 4px 4px 4px;
    transition: transform 0.5s, top 0.2s;
        
    /* transition-delay: 0.2s, 0s; */



.sw-bottom
    position: relative
    top: 20px
    width: 100px
    height: 10px
    background: rgb(255, 255, 255);
    border: none;
    border-radius: 4px 4px 4px 4px;
    transition: transform 0.5s, top 0.2s;
    transition-delay: 0.2s, 0s; 

#sandwich:hover 
  .sw-topper
    top: 15px;
    transform: rotate(140deg);
  .sw-bottom
    top: 5px;
    transform: rotate(-140deg);