@keyframes scroll {
    from {
        opacity: 0;
        scale: 0.5;
    }
    to {
        opacity: 1;
        scale: 1;
    }
}

/* width and element height grows */
@keyframes appear-inset {
    from {
        opacity: 0;
        clip-path: inset(100% 100% 0 0);
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

/* width and element height grows */
@keyframes appear-translate {
    from {
        opacity: 0;
        transform: translate(-100px);
    }
    to {
        opacity: 1;
        transform: translate(0px);
    }
}

.block {
    width: 50%;
    height: 100px;
    background-color: #3498db;
    margin: 10px;
    /* display: inline-block; */
    animation: appear-translate linear;
    animation-timeline: view(); /* animation will start when the element is in view (visible in the viewport) */
    animation-range: entry 0 cover 40%; /* 0% viewport - aniimation on entry and completed on 20% after entry */
}

.block:nth-child(2n) {
    background-color: #e74c3c;
}

.block:nth-child(3n) {
    background-color: yellow;
}