@keyframes visible {
  from {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes line-top {
  from {
    transform: translateY(-200px);
  }
}
@keyframes line-bottom {
  from {
    transform: translateY(200px);
  }
}
@keyframes point {
  20% {
    transform: rotate(180deg) translateY(0);
  }
  30% {
    transform: rotate(180deg) translateY(20px);
  }
  40% {
    transform: rotate(180deg) translateY(0);
  }
  to {
    transform: rotate(180deg) translateY(0);
  }
}
@keyframes point2 {
  30% {
    color: #6666CC;
  }
  70% {
    color: #6666CC;
  }
}
@keyframes point3 {
  30% {
    background-color: #6666CC;
    border-color: #6666CC;
  }
  70% {
    background-color: #6666CC;
    border-color: #6666CC;
  }
}
@keyframes point4 {
  30% {
    border-color: #6666CC;
  }
  70% {
    border-color: #6666CC;
  }
}
@keyframes scroll {
  from {
    background-position-y: 20px;
  }

  50% {
    background-position-y: 10px;
  }

  to {
    background-position-y: 20px;
  }
}

header {
  animation: visible 1s ease-out 1s both;
}
#scroll {
  animation: visible 1s ease-out 1.4s both, point4 4s ease-out infinite, scroll 1.2s ease-out infinite;
}
.ani .line,
#projects-list li {
  animation: point3 4s ease-out infinite;
}
.ani .logo-svg.pt::before {
  animation: point 3s ease-out infinite;
}
.ani #logo-mean .pt,
.ani #intro-text p:last-child span:nth-child(n + 2),
.text-change li,
#project-page span:first-child {
  animation: point2 4s ease-out infinite;
}