*[data-animation-active="0"] {
    animation-duration: 0s;
}
*[data-animation-active="1"] {
    animation-duration: 1s;
}



*[data-animation-name="opacity-zoom"][data-element-visible] {
    transform-origin: 50% 50%;
    opacity: 0;
}

*[data-animation-name="opacity-zoom"][data-element-visible="1"] {
    animation-name: animation-opacity-zoom;
    animation-fill-mode: forwards;
}

@keyframes animation-opacity-zoom {
    0% {
        transform: scale(.7);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}


*[data-animation-name="background-zoom"][data-element-visible] {
    background-size: 120%;
}

*[data-animation-name="background-zoom"][data-element-visible="1"] {
    animation-name: animation-background-zoom;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
}

@keyframes animation-background-zoom {
    0% {
        background-size: auto 140%;
    }
    100% {
        background-size: auto 120%;
    }
}



*[data-animation-name="opacity-left-right"][data-element-visible] {
    transform-origin: 50% 50%;
    opacity: 0;
}

*[data-animation-name="opacity-left-right"][data-element-visible="1"] {
    animation-name: animation-opacity-left-right;
    animation-fill-mode: forwards;
}

@keyframes animation-opacity-left-right {
    0% {
        transform: translate(-30%, 0);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}



*[data-animation-name="opacity-right-left"][data-element-visible] {
    transform-origin: 50% 50%;
    opacity: 0;
}

*[data-animation-name="opacity-right-left"][data-element-visible="1"] {
    animation-name: animation-opacity-right-left;
    animation-fill-mode: forwards;
}

@keyframes animation-opacity-right-left {
    0% {
        transform: translate(30%, 0);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}