.text {
    animation: appear 0.5s linear;
}

@keyframes appear {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
		
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(1);
    }
}

.card {
    animation: scr 2s linear;
    animation-timeline: view();
    animation-range: entry 10% cover 40%;
}

@keyframes scr {
    from {
        filter: blur(10px);
        transform: scale(0.5);
    }

    to {
        filter: blur(0px);
        transform: scale(1);
    }
}
.ani{
	animation: appear 1s linear;
	animation-timeline: view();
    animation-range: entry 10% cover 40%;
}
.progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color:yellow;
    animation: progress linear;
    z-index: 9999;
    transform-origin: 0 50%;
    animation-timeline: scroll();
}

@keyframes progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}