@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadein-animation {
  animation: 3s fadein;
}

@keyframes slideIn1 {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.scroll-box1 {
    animation: slideIn1 ease;
    animation-timeline: view();
    animation-range: entry -5% cover 60%;
}

@keyframes slideIn2 {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.scroll-box2 {
    animation: slideIn2 ease;
    animation-timeline: view();
    animation-range: entry -5% cover 60%;
}

@keyframes slideIn12 {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.scroll-box12 {
    animation: slideIn12 ease;
    animation-timeline: view();
    animation-range: entry -5% cover 25%;
}

.scroll-box13 {
    animation: slideIn12 ease;
    animation-timeline: view();
    animation-range: entry -5% cover 50%;
}

.scroll-box14 {
    animation: slideIn12 ease;
    animation-timeline: view();
    animation-range: entry -5% cover 75%;
}

@keyframes slideOut1-about {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100px);
    }
}

.slideOut1-about {
    animation: slideOut1-about ease;
    animation-timeline: view();
    animation-range: entry 100% cover 110%;
}

@keyframes slideOut2-about {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-100px);
    }
}

.slideOut2-about {
    animation: slideOut2-about ease;
    animation-timeline: view();
    animation-range: entry 300% cover 310%;
}