style.css

body {
  background-color:#c3e6fc;
  overflow: hidden;
}

h1 {
  position: absolute;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
    'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  top: 58%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}

.logo-icon {
  position: absolute;
  top: 40%;
  left: 50%;
  margin-left: -50px;
  animation: speeder 1s linear infinite;
}

.logo-icon > span > span:nth-child(1),
.logo-icon > span > span:nth-child(2),
.logo-icon > span > span:nth-child(3),
.logo-icon > span > span:nth-child(4) {
  width: 55px;
  height: 1px;
  top: 10%;
  background: #487db9;
  position: absolute;
  animation: fazer1 0.25s linear infinite;
}

.logo-icon > span > span:nth-child(2) {
  top: 30%;
  background: #324672;
  animation: fazer1 0.45s linear infinite;
}

.logo-icon > span > span:nth-child(3) {
  top: 50%;
  background: #2c81b9;
  animation: fazer1 0.45s linear infinite;
}

.logo-icon > span > span:nth-child(4) {
  top: 80%;
  animation: fazer1 1.15s linear infinite;
}

@keyframes fazer1 {
  0% {
    left: 0;
  }
  100% {
    left: -150px;
    opacity: 0;
  }
}
@keyframes fazer2 {
  0% {
    left: 0;
  }
  100% {
    left: -100px;
    opacity: 0;
  }
}
@keyframes fazer3 {
  0% {
    left: 0;
  }
  100% {
    left: -50px;
    opacity: 0;
  }
}
@keyframes fazer4 {
  0% {
    left: 0;
  }
  100% {
    left: -150px;
    opacity: 0;
  }
}

@keyframes speeder {
  0% {
    transform: translate(4px, 2px) rotate(0deg);
  }
  10% {
    transform: translate(-10px, -5px) rotate(-1deg);
  }
  20% {
    transform: translate(-15px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(-30px, 4px) rotate(0deg);
  }
  40% {
    transform: translate(-45px, -2px) rotate(1deg);
  }
  50% {
    transform: translate(-55px, 5px) rotate(-1deg);
  }
  60% {
    transform: translate(-30px, 2px) rotate(0deg);
  }
  70% {
    transform: translate(-25px, 2px) rotate(-1deg);
  }
  80% {
    transform: translate(-20px, -2px) rotate(1deg);
  }
  90% {
    transform: translate(-10px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(0px, -4px) rotate(-1deg);
  }
}

.longfazers {
  position: absolute;
  width: 100%;
  height: 100%;
}
.longfazers span {
  position: absolute;
  height: 3px;
  width: 20%;
}
.longfazers span:nth-child(1) {
  top: 20%;
  animation: lf 1.5s linear infinite;
  animation-delay: -5s;
}
.longfazers span:nth-child(2) {
  top: 40%;
  animation: lf2 2.5s linear infinite;
  animation-delay: -1s;
}
.longfazers span:nth-child(3) {
  top: 60%;
  animation: lf3 3s linear infinite;
}
.longfazers span:nth-child(4) {
  top: 80%;
  animation: lf4 1.5s linear infinite;
  animation-delay: -3s;
}
.longfazers span:nth-child(5) {
  top: 10%;
  background-color: #324672;
  animation: lf 0.7s linear infinite;
  animation-delay: -3s;
}
.longfazers span:nth-child(6) {
  top: 30%;
  background-color: #324672;
  animation: lf 0.9s linear infinite;
  animation-delay: -3s;
}
.longfazers span:nth-child(7) {
  top: 50%;
  background-color: #324672;
  animation: lf 0.7s linear infinite;
  animation-delay: -3s;
}
.longfazers span:nth-child(8) {
  top: 80%;
  background-color: #324672;
  animation: lf 0.6s linear infinite;
  animation-delay: -3s;
}

@keyframes lf {
  0% {
    left: 200%;
  }
  100% {
    left: -200%;
    opacity: 0;
  }
}
@keyframes lf2 {
  0% {
    left: 200%;
  }
  100% {
    left: -200%;
    opacity: 0;
  }
}
@keyframes lf3 {
  0% {
    left: 200%;
  }
  100% {
    left: -100%;
    opacity: 0;
  }
}
@keyframes lf4 {
  0% {
    left: 200%;
  }
  100% {
    left: -100%;
    opacity: 0;
  }
}