presentation/effects/element.effect.css

presentation/effects/element.effect.css is a file in Bane's Lab Site. 53 lines of code and 0 definitions.

@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);
    }
}

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

[data-animate].animated {
    opacity: 1;
    transform: none;
}

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

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

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

@media (prefers-reduced-motion: reduce) {
    [data-animate],
    [data-animate].animated {
        animation: none;
        opacity: 1;
        transform: none;
    }
}