/* scroll fedein with transform position */

@keyframes scrlupanim {
    0% {
        transform: translateY(4em);
    }
    100% {
        transform: translateY(0);
    }
}

.scrlup,
.scrlstart {
    opacity: 0;
    will-change: transform;
    transform: translateY(3rem);
    transition: transform .5s ease, opacity .5s ease;
}

.scrlup.on,
.scrlstart.on {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

.scrlup05s {
    opacity: 0;
    transform: translateY(3rem);
    transition: transform .5s .5s ease, opacity .5s .5s ease;
}

.scrlup05s.on {
    opacity: 1;
    transform: translateY(0);
}

.scrlin {
    opacity: 0;
    transform: translateX(5rem);
    transition: transform 1s ease, opacity 1s ease;
}

.scrlin.on {
    opacity: 1;
    transform: translateX(0);
    transition: transform 1s 0.2s ease, opacity 1s 0.2s ease;
}

.scrlzoomstart,
.scrlzoom {
    opacity: 0;
    transform: scale(1.25);
    transition: all .5s .1s ease;
}

.scrlzoomstart.on,
.scrlzoom.on {
    opacity: 1;
    will-change: transform;
    transform: scale(1);
    transition: all .5s .1s ease;
}

.scrlzoom2 {
    opacity: 0;
    transform: scale(1.05);
    transition: all 1s .5s ease;
}

.scrlzoom2.on {
    opacity: 1;
    transform: scale(1);
    transition: all 1s .5s ease;
}

.scrlzoom3 {
    opacity: 0;
    transform: scale(1.05);
    transition: all 1s 1s ease;
}

.scrlzoom3.on {
    opacity: 1;
    transform: scale(1);
    transition: all 1s 1s ease;
}

.scrlfade {
    opacity: 1;
    transition: all .5s ease;
}

.scrlfade.off {
    opacity: 0;
    transition: all .5s ease;
}