#{$rootClass}.bounce.out {
    animation-duration: $bounceInDuration;
    animation-timing-function: $bounceInTimingFunction;

    &.left {
        @include chainable-anim-out(bounce-out-left);
    }

    &.right {
        @include chainable-anim-out(bounce-out-right);
    }

    &.up {
        @include chainable-anim-out(bounce-out-up);
    }

    &.down {
        @include chainable-anim-out(bounce-out-down);
    }

    &.up.left {
        @include chainable-anim-out(bounce-out-up-left);
    }

    &.down.left {
        @include chainable-anim-out(bounce-out-down-left);
    }

    &.up.right {
        @include chainable-anim-out(bounce-out-up-right);
    }

    &.down.right {
        @include chainable-anim-out(bounce-out-down-right);
    }

    &.shake {
        @include chainable(
            $shakeDuration,
            $shakeTimingFunction,
            $bounceOutDuration,
            $bounceOutTimingFunction
        );
    }

    &.pulsate {
        @include chainable(
            $pulsateDuration,
            $pulsateTimingFunction,
            $bounceOutDuration,
            $bounceOutTimingFunction
        );
    }

    &.flash {
        @include chainable(
            $flashDuration,
            $flashTimingFunction,
            $bounceOutDuration,
            $bounceOutTimingFunction
        );
    }

    &.wave {
        @include chainable(
            $waveDuration,
            $waveTimingFunction,
            $bounceOutDuration,
            $bounceOutTimingFunction
        );
    }
}

@keyframes bounce-out-right {
    0%,
    40% {
        transform: none;
    }
    70% {
        transform: translate3d(-#{$bounceOut}, 0, 0);
    }
    100% {
        transform: translate3d(#{$rightClearance}, 0, 0);
    }
}

@keyframes bounce-out-left {
    0%,
    40% {
        transform: none;
    }
    70% {
        transform: translate3d(#{$bounceOut}, 0, 0);
    }
    100% {
        transform: translate3d(-#{$leftClearance}, 0, 0);
    }
}

@keyframes bounce-out-up {
    0%,
    40% {
        transform: none;
    }
    70% {
        transform: translate3d(0, #{$bounceOut}, 0);
    }
    100% {
        transform: translate3d(0, -#{$topClearance}, 0);
    }
}

@keyframes bounce-out-down {
    0%,
    40% {
        transform: none;
    }
    70% {
        transform: translate3d(0, -#{$bounceOut}, 0);
    }
    100% {
        transform: translate3d(0, #{$bottomClearance}, 0);
    }
}

@keyframes bounce-out-down-right {
    0%,
    40% {
        transform: none;
    }
    70% {
        transform: translate3d(-#{$bounceOut}, -#{$bounceOut}, 0);
    }
    100% {
        transform: translate3d(#{$rightClearance}, #{$topClearance}, 0);
    }
}

@keyframes bounce-out-up-right {
    0%,
    40% {
        transform: none;
    }
    70% {
        transform: translate3d(-#{$bounceOut}, #{$bounceOut}, 0);
    }
    100% {
        transform: translate3d(#{$rightClearance}, -#{$topClearance}, 0);
    }
}

@keyframes bounce-out-down-left {
    0%,
    40% {
        transform: none;
    }
    70% {
        transform: translate3d(#{$bounceOut}, -#{$bounceOut}, 0);
    }
    100% {
        transform: translate3d(-#{$leftClearance}, #{$bottomClearance}, 0);
    }
}

@keyframes bounce-out-up-left {
    0%,
    40% {
        transform: none;
    }
    70% {
        transform: translate3d(#{$bounceOut}, #{$bounceOut}, 0);
    }
    100% {
        transform: translate3d(-#{$leftClearance}, -#{$topClearance}, 0);
    }
}