@charset 'utf-8';

/*  ========================================================================
    JUICE -> ANIMATIONS -> BOUNCE -> ENTRANCE -> BOUNCE IN DOWN
    ========================================================================  */

// Check if the animations with bounce in down should be imported
@if $import-animations and $import-animation-bounce-in-down {
    .has-animation {
        // Nested selectors
        &.bounce-in-down {
            @keyframes bounce-in-down {
                from {
                    opacity: 0;
                    transform: translate3d(0, (0px - $animation-bounce-in-distance), 0);
                }

                50% {
                    opacity: 1;
                    transform: translate3d(0, (0px + ($animation-bounce-in-distance * 2.5 / 100)), 0);
                }

                70% {
                    transform: translate3d(0, (0px - ($animation-bounce-in-distance * 1.5 / 100)), 0);
                }

                to {
                    transform: translate3d(0, 0, 0);
                }
            }

            animation-delay: $animation-bounce-in-delay;
            animation-duration: $animation-bounce-in-duration;
            animation-name: bounce-in-down;
            animation-timing-function: $animation-bounce-in-easing;
        }
    }
}