@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(var(--rise-sm));
    }

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

@keyframes fade-in-up-large {
    0% {
        opacity: 0;
        transform: translateY(var(--rise-lg));
    }

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

@keyframes scale-in {
    0% {
        opacity: 0;
        transform: scale(var(--scale-shrunk));
    }

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

@keyframes bounce-in {
    0% {
        opacity: 0;
        transform: scale(var(--scale-tiny));
    }

    50% {
        transform: scale(var(--scale-overshoot));
    }

    70% {
        transform: scale(var(--scale-settle));
    }

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

[data-animate] {
    opacity: 0;
    transform: translateY(0);
}

[data-animate="fade-in"].animated {
    animation: fade-in var(--animate-fade) var(--easing-ease) var(--animate-delay, 0ms) both;
}

[data-animate="fade-in-up"].animated {
    animation: fade-in-up var(--animate-rise) var(--easing-rise) var(--animate-delay, 0ms) both;
}

[data-animate="fade-in-up-large"].animated {
    animation: fade-in-up-large var(--animate-rise-large) var(--easing-rise) var(--animate-delay, 0ms) both;
}

[data-animate="scale-in"].animated {
    animation: scale-in var(--animate-scale) var(--easing-spring) var(--animate-delay, 0ms) both;
}

[data-animate="bounce-in"].animated {
    animation: bounce-in var(--animate-bounce) var(--easing-bounce) var(--animate-delay, 0ms) both;
}