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
