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

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

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

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

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

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

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

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

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

    &.shake {
        @include chainable(
            $bounceInDuration,
            $bounceInTimingFunction,
            $shakeDuration,
            $shakeTimingFunction
        );
    }

    &.pulsate {
        @include chainable(
            $bounceInDuration,
            $bounceInTimingFunction,
            $pulsateDuration,
            $pulsateTimingFunction
        );
    }

    &.flash {
        @include chainable(
            $bounceInDuration,
            $bounceInTimingFunction,
            $flashDuration,
            $flashTimingFunction
        );
    }

    &.wave {
        @include chainable(
            $bounceInDuration,
            $bounceInTimingFunction,
            $waveDuration,
            $waveTimingFunction
        );
    }
}

@keyframes bounce-in-right {
    0% {
        transform: translate3d(-#{$rightClearance}, 0, 0);
    }
    60% {
        transform: translate3d(#{$bounceIn}, 0, 0);
    }
    80% {
        transform: translate3d(-#{$bounceDuring}, 0, 0);
    }
    100% {
        transform: none;
    }
}

@keyframes bounce-in-left {
    0% {
        transform: translate3d(#{$leftClearance}, 0, 0);
    }
    60% {
        transform: translate3d(-#{$bounceIn}, 0, 0);
    }
    80% {
        transform: translate3d(#{$bounceDuring}, 0, 0);
    }
    100% {
        transform: none;
    }
}

@keyframes bounce-in-up {
    0% {
        transform: translate3d(0, #{$bottomClearance}, 0);
    }
    60% {
        transform: translate3d(0, -#{$bounceIn}, 0);
    }
    80% {
        transform: translate3d(0, #{$bounceDuring}, 0);
    }
    100% {
        transform: none;
    }
}

@keyframes bounce-in-down {
    0% {
        transform: translate3d(0, -#{$topClearance}, 0);
    }
    60% {
        transform: translate3d(0, #{$bounceIn}, 0);
    }
    80% {
        transform: translate3d(0, -#{$bounceDuring}, 0);
    }
    100% {
        transform: none;
    }
}

@keyframes bounce-in-down-right {
    0% {
        transform: translate3d(-#{$rightClearance}, -#{$topClearance}, 0);
    }
    60% {
        transform: translate3d(#{$bounceIn}, #{$bounceIn}, 0);
    }
    80% {
        transform: translate3d(-#{$bounceDuring}, -#{$bounceDuring}, 0);
    }
    100% {
        transform: none;
    }
}

@keyframes bounce-in-up-right {
    0% {
        transform: translate3d(-#{$rightClearance}, #{$bottomClearance}, 0);
    }
    60% {
        transform: translate3d(#{$bounceIn}, -#{$bounceIn}, 0);
    }
    80% {
        transform: translate3d(-#{$bounceDuring}, #{$bounceDuring}, 0);
    }
    100% {
        transform: none;
    }
}

@keyframes bounce-in-down-left {
    0% {
        transform: translate3d(#{$leftClearance}, -#{$topClearance}, 0);
    }
    60% {
        transform: translate3d(-#{$bounceIn}, #{$bounceIn}, 0);
    }
    80% {
        transform: translate3d(#{$bounceDuring}, -#{$bounceDuring}, 0);
    }
    100% {
        transform: none;
    }
}

@keyframes bounce-in-up-left {
    0% {
        transform: translate3d(#{$leftClearance}, #{$bottomClearance}, 0);
    }
    60% {
        transform: translate3d(-#{$bounceIn}, -#{$bounceIn}, 0);
    }
    80% {
        transform: translate3d(#{$bounceDuring}, #{$bounceDuring}, 0);
    }
    100% {
        transform: none;
    }
}