.header {
  opacity: 0;
  transform: translateY(-20px);
}
.title,
.project-ani-1,
.project-ani-2,
.project-ani-3,
.project-ani-4 {
  opacity: 0;
  transform: translateY(20px);
}
@keyframes f {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.header {
  animation: f 0.8s ease-out 0.1s forwards;
}
.title {
  animation: f 0.8s ease-out 0.4s forwards;
}
.project-ani-1 {
  animation: f 0.8s ease-out 0.6s forwards;
}
.project-ani-2 {
  animation: f 0.8s ease-out 0.9s forwards;
}
.project-ani-3 {
  animation: f 0.8s ease-out 1.2s forwards;
}
.project-ani-4 {
  animation: f 0.8s ease-out 1.5s forwards;
}