.animtaionContent {
    transition: all 0.5s ease;
    animation: animtaionContent;
    animation-timeline: view(block);
    animation-range: cover 0% cover 60%;
}

@keyframes animtaionContent {
    0% {
        opacity: 0;
        transform: translateX(-500px);

    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


.imageSecond {
    transition: all 0.5s ease;
    animation: imageSecond;
    animation-timeline: view(10%);
}

@keyframes imageSecond {
    0% {
        opacity: 0;
        transform: translateX(50px);

    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


.thirdAnimation {
    transition: all 0.5s ease;
    animation: thirdAnimation;
    animation-timeline: view(40% auto);
}

@keyframes thirdAnimation {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    100% {
        opacity: 1;
        transform: scale(100%);
    }
}