@keyframes lr {
    0% {
        transform: scaleX(0);
        transform-origin: 0% 50%
    }

    20% {
        transform: scaleX(.5);
        transform-origin: 0% 50%
    }

    40% {
        transform: scaleX(1);
        transform-origin: 0% 50%
    }

    60% {
        transform: scaleX(1);
        transform-origin: 100% 50%
    }

    80% {
        transform: scaleX(.5);
        transform-origin: 100% 50%
    }

    100% {
        transform: scaleX(0);
        transform-origin: 100% 50%;
        animation: unset
    }
}

.de_reveal_curtain_direction_lr .block-revealer__element {
    transform: scaleX(0);
    transform-origin: 0% 50%;
    background-color: red;
    animation-name: lr;
    animation-duration: 1s
}

@keyframes rl {
    0% {
        transform: scaleX(0);
        transform-origin: 100% 50%
    }

    20% {
        transform: scaleX(.5);
        transform-origin: 100% 50%
    }

    40% {
        transform: scaleX(1);
        transform-origin: 100% 50%
    }

    60% {
        transform: scaleX(1);
        transform-origin: 0% 50%
    }

    80% {
        transform: scaleX(.5);
        transform-origin: 0% 50%
    }

    100% {
        transform: scaleX(0);
        transform-origin: 0% 50%;
        animation: unset
    }
}

.de_reveal_curtain_direction_rl .block-revealer__element {
    transform: scaleX(0);
    transform-origin: 100% 50%;
    background-color: red;
    animation-name: rl;
    animation-duration: 1s
}

@keyframes tb {
    0% {
        transform: scaleY(0);
        transform-origin: 50% 0%
    }

    20% {
        transform: scaleY(.5);
        transform-origin: 50% 0%
    }

    40% {
        transform: scaleY(1);
        transform-origin: 50% 0%
    }

    60% {
        transform: scaleY(1);
        transform-origin: 50% 100%
    }

    80% {
        transform: scaleY(.5);
        transform-origin: 50% 100%
    }

    100% {
        transform: scaleY(0);
        transform-origin: 50% 100%;
        animation: unset
    }
}

.de_reveal_curtain_direction_tb .block-revealer__element {
    transform: scaleY(0);
    transform-origin: 50% 0%;
    background-color: red;
    animation-name: tb;
    animation-duration: 1s
}

@keyframes bt {
    0% {
        transform: scaleY(0);
        transform-origin: 50% 100%
    }

    20% {
        transform: scaleY(.5);
        transform-origin: 50% 100%
    }

    40% {
        transform: scaleY(1);
        transform-origin: 50% 100%
    }

    60% {
        transform: scaleY(1);
        transform-origin: 50% 0%
    }

    80% {
        transform: scaleY(.5);
        transform-origin: 50% 0%
    }

    100% {
        transform: scaleY(0);
        transform-origin: 50% 0%;
        animation: unset
    }
}

.de_reveal_curtain_direction_bt .block-revealer__element {
    transform: scaleY(0);
    transform-origin: 50% 100%;
    background-color: red;
    animation-name: bt;
    animation-duration: 1s
}