Burger Button Cosmic | CSS3 Animation

HTML
<div class="nav"> <div class="top line"></div> <div class="middle line"></div> <div class="bottom line"></div> <div class="run"></div> <div class="circle"></div> </div>
SASS
html, body width: 100% height: 100% margin: 0 body background: #50C9C3 background: -webkit-linear-gradient(to left, #50C9C3 , #96DEDA) background: linear-gradient(to left, #50C9C3 , #96DEDA) .nav height: 100px width: 90px position: absolute margin: 0 auto right: 0 left: 0 top: 45% cursor: pointer .line position: relative width: 100% height: 3px margin: 20px 0 background-color: #fff .top top: 0 animation: levitatetop 3s infinite animation-timing-function: cubic-bezier(.51, .55, .27, .70) .middle top: 0 animation: levitatemid 2s infinite animation-timing-function: cubic-bezier(.51, .55, .27, .70) .bottom bottom: 0 animation: levitatebot 3s infinite animation-timing-function: cubic-bezier(.51, .55, .27, .70) .run position: absolute top: 32px height: 1px width: 20px background-color: #fff animation: runline 3s infinite animation-timing-function: cubic-bezier(.51, .55, .27, .70) .circle width: 7px height: 7px position: absolute top: -15px right: 0 border-radius: 100% border: 1px solid white animation: rotation 2.5s linear 0s infinite &:after content: " " width: 3px height: 3px position: absolute top: -15px right: -5px border-radius: 100% border: 1px solid white @keyframes rotation 0% transform: rotate(0deg) 100% transform: rotate(360deg) @keyframes runline 0% left: -30px opacity: 1 30% left: 100px top: 32px opacity: 1 50% top: 60px left: 100px 60% top: 60px left: 100px 70% left: -50px opacity: 1 top: 60px 100% left: -50px opacity: 1 top: 32px @keyframes levitatetop 0% top: -10px 50% top: 10px 100% top: -10px @keyframes levitatemid 0% top: 0px 50% top: 0 100% top: 0px @keyframes levitatebot 0% bottom: 10px 50% bottom: -10px 100% bottom: 10px
JAVASCRIPT
Expand for more options Login