$tnsl-flicker-duration: 0.5s !default;
$tnsl-flickerQuick-duration: 0.2s !default;
$tnsl-slideFromLeft-duration: 0.1s !default;
$tnsl-slideFromRight-duration: 0.1s !default;

@keyframes flicker {
    0% { opacity: 0.0; }
    10% { opacity: 1.0; }
    20% { opacity: 0.0; }
    30% { opacity: 1.0; }
    40% { opacity: 0.0; }
    50% { opacity: 1.0; }
    60% { opacity: 0.0; }
    70% { opacity: 1.0; }
    80% { opacity: 0.0; }
    90% { opacity: 1.0; }
    100% { opacity: 1.0; }
}

@keyframes flickerQuick {
    0% { opacity: 0.0; }
    20% { opacity: 1.0; }
    40% { opacity: 0.0; }
    60% { opacity: 1.0; }
    80% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes slideFromLeft {
    0% {
        transform: translate3d(-100%, 0, 0);
        visibility: hidden;
    }

    100% {
        transform: translate3d(0, 0, 0);
        visibility: visible;
    }
}

@keyframes slideFromRight {
    0% {
        transform: translate3d(100%, 0, 0);
        visibility: hidden;
    }

    100% {
        transform: translate3d(0, 0, 0);
        visibility: visible;
    }
}

@mixin animation_settings ($duration, $timing_func, $fill_mode) {
    animation-duration: $duration;
    animation-timing-function: $timing_func;
    animation-fill-mode: $fill_mode;
}

.tnsl-flicker {
    opacity: 0.0;
    @include animation_settings ($tnsl-flicker-duration, steps, forwards);
    // animation-name added via JS
}

.tnsl-flickerQuick {
    opacity: 0.0;
    @include animation_settings ($tnsl-flickerQuick-duration, steps, forwards);
    // animation-name added via JS
}

.tnsl-slideFromLeft {
    visibility: hidden;
    @include animation_settings ($tnsl-slideFromLeft-duration, steps, forwards);
    // animation-name added via JS
}

.tnsl-slideFromRight {
    visibility: hidden;
    @include animation_settings ($tnsl-slideFromRight-duration, steps, forwards);
    // animation-name added via JS
}

.tnsl-random{
    visibility: hidden;
}