Glider Logo

by Daehyun Im

HTML

<div class='logo loading'>
GLIDER
</div>
<br/>
<div class='logo complete'>
GLIDER
</div>

SCSS

@font-face{
  font-family:logo;src:url(https://tistory1.daumcdn.net/tistory/1412876/skin/images/04b_20__.ttf) format("truetype"),
  url(https://tistory1.daumcdn.net/tistory/1412876/skin/images/04b_20__.woff) format("woff")
}

@keyframes driveIn {
  0% {
    transform: skewX(-30deg);
    left: -800px;
  }
  20% {
    transform: skewX(-30deg);
    left: -400px;
  }
  39% {
    transform: skewX(-30deg);
    left: 0;
  }
  40% {
    transform: skewX(-10deg);
    left: 0;
  }
  50% {
    transform: skewX(10deg);
    left: 0;
  }
  70% {
    transform: skewX(0deg);
    left: 0;
  }
}

@keyframes driveOut {
  0% {
    transform: skewX(0deg);
    left: 0%;
  }
  30% {
    transform: skewX(+30deg);
    left: 0%;
  }
  31% {
    transform: skewX(-30deg);
    left: 0%;
  }
  100% {
    transform: skewX(-30deg);
    left: 120%;
  }
}

.logo {
  font-family: logo!important;
  font-size: 2rem;  
  position: relative;
}

body {
  overflow: hidden;
}

.loading {
  animation: driveIn 2s forwards 1;
}

.complete {
  animation: driveOut 2s forwards 1;
}