# presentation/effects/element.effect.css

> 73 lines of code and 0 definitions.

Tree: Site tree
Language: css
Layer: product
Canonical: https://banes-lab.com/anatomy/tree#file-presentation-effects-element-effect-css
Source text: https://banes-lab.com/assets/sources/source.cd8073bba70ba04fab353e2abd3432f88e23ba5c5556700875865cca383451bd.generated.txt

## Source

```css
@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;
}
```