.animationElementIsVisible, .animationElementDownUpIsVisible, .animationElementUpDownIsVisible, .animationElementLeftRightIsVisible, .animationElementRightLeftIsVisible {
    animation: animationSlide var(--animation_animationDuration) var(--animation_animationCourse) forwards;
}

.animationElementIsVisible {
    transform: var(--animation_animationDirection);
}

.animationElementDownUpIsVisible {
    transform: translateY(+10dvh);
}

.animationElementUpDownIsVisible {
    transform: translateY(-10dvh);
}

.animationElementLeftRightIsVisible {
    transform: translateX(+10dvh);
}

.animationElementRightLeftIsVisible {
    transform: translateX(-10dvh);
}

@keyframes animationOpacity {
    from {
        opacity: var(--opacityDown);
    }
    to {
        opacity: var(--opacityUp);
    }
}

@keyframes animationOpacityD {
    from {
        opacity: var(--opacityDown);
    }
    to {
        opacity: var(--opacityUpD);
    }
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@keyframes animationSlide {
    from {
        opacity: var(--opacityDown);
    }
    to {
        transform: translateY(0) translateX(0);
        opacity: var(--opacityUp);
    }
}