I Can't Sleep Again! (CSS Animation)

HTML
SCSS
@import "compass"; *, *::after, *::before{ @include box-sizing(border-box); } html{ background: #000; font-family: chiller; } head{ display: block; position: relative; width: 200px; margin: 10% auto 0; @include animation(shvr .2s infinite); &::after{ content: ''; width: 20px; height: 20px; background: #000; position: absolute; top: 30px; left: 25px; @include border-radius(50%); @include box-shadow(125px 0 0 #000); @include animation(eye 2.5s infinite) } } meta{ position: relative; display: inline-block; background: #f2354b; width: 75px; height: 80px; @include border-radius(50% 50% 50% 50% / 45px 45px 45% 45%); @include rotate(45deg); &::after{ content: ''; position: absolute; border-bottom: 2px solid #fff; width: 70px; height: 50px; left:0px; bottom: -10px; @include border-radius(50%); } &::before{ bottom: auto; top: -100px; @include rotate(45deg); left: 0; } &:nth-of-type(2){ float: right; @include rotate(-45deg); &::after{ left:5px; } } &:nth-of-type(3){ display: none; } } body{ margin-top: 100px; text-align: center; color: #f2354b; &::before{ content:'cant sleep...!'; font-size: 80px; font-weight: 800; display: block; margin-bottom: 10px; } &::after{ content: 'Agaaain.....?'; color: #f2354b; width: 120px; font-size: 30px; overflow: hidden; display: inline-block; white-space: nowrap; } } @include keyframes(eye){ 0% ,30% , 55%, 90% , 100%{ @include translate(0 , 0) } 10%, 25%{ @include translate( 0 , 20px) } 65%{ @include translate(-20px, 0) } 80%{ @include translate(20px, 0) } } @include keyframes(shvr){ 0%{ @include translate(1px) } 50%{ @include translate(0) } 100%{ @include translate(-1px) } } @include keyframes(text-show){ to{text-indent: -373px;} }
JAVASCRIPT
Expand for more options Login