onScrollEffect {
    animation-play-state: paused; 
}

.fadeIn1 {
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-fill-mode: both;
}

.fadeIn2 {
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: both;
}

.fadeIn3 {
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: both;
}


.slideInLeft1 {
    animation-name: slideInLeft;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-fill-mode: both;
}

.slideInLeft2 {
    animation-name: slideInLeft;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: both;
}

.slideInLeft3 {
    animation-name: slideInLeft;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: both;
}

.slideInRight1 {
    animation-name: slideInRight;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-fill-mode: both;
}

.slideInRight2 {
    animation-name: slideInRight;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: both;
}

.slideInRight3 {
    animation-name: slideInRight;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: both;
}

.slideInUp1 {
    animation-name: slideInUp;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-fill-mode: both;
}

.slideInUp2 {
    animation-name: slideInUp;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: both;
}

.slideInUp3 {
    animation-name: slideInUp;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: both;
}

.slideInDown1 {
    animation-name: slideInDown;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-fill-mode: both;
}

.slideInDown2 {
    animation-name: slideInDown;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: both;
}

.slideInDown3 {
    animation-name: slideInDown;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: both;
}

.zoomOut1 {
    animation-name: zoomOut;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-fill-mode: both;
}

.zoomOut2 {
    animation-name: zoomOut;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: both;
}

.zoomOut {
    animation-name: zoomOut;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: both;
}

.zoomIn1 {
    animation-name: zoomIn;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-fill-mode: both;
}

.zoomIn2 {
    animation-name: zoomIn;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: both;
}

.zoomIn3 {
    animation-name: zoomIn;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: both;
}

.bounceIn1 {
    animation-name: bounceIn;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-fill-mode: both;
}

.bounceIn2 {
    animation-name: bounceIn;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: both;
}

.bounceIn3 {
    animation-name: bounceIn;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: both;
}


.rubberBand1 {
    animation-name: rubberBand;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-fill-mode: both;
}

.rubberBand2 {
    animation-name: rubberBand;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: both;
}

.rubberBand3 {
    animation-name: rubberBand;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: both;
}