@charset 'utf-8';

/*  ========================================================================
    JUICE -> ANIMATIONS -> ATTRACTORS -> VIBRATE
    ========================================================================  */

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

                10%, 90% {
                    transform: translate3d(-1px, 0, 0);
                }

                20%, 80% {
                    transform: translate3d(2px, 0, 0);
                }

                30%, 50%, 70% {
                    transform: translate3d(-4px, 0, 0);
                }

                40%, 60% {
                    transform: translate3d(4px, 0, 0);
                }
            }

            animation-delay: $animation-attractor-vibrate-delay;
            animation-duration: $animation-attractor-vibrate-duration;
            animation-name: vibrate;
            animation-iteration-count: $animation-attractor-vibrate-iteration-count;
            animation-timing-function: $animation-attractor-vibrate-easing;
        }
    }
}