@keyframes emphasis-fly-in--up {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes emphasis-fly-in--down {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes exit-fly-in--up {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-150%);
    }
}

@keyframes emphasis-spin--clockwise {
    from {
        rotate: 0;
    }

    to {
        rotate: 360deg;
    }
}

@keyframes emphasis-gelatine {
    0% {
        transform: scale(1, 1);
    }

    12.5% {
        transform: scale(0.9, 1.1);
    }

    25% {
        transform: scale(1.1, 0.9);
    }

    37.5% {
        transform: scale(0.95, 1.05);
    }

    50% {
        transform: scale(1, 1);
    }

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