@mixin eui-anim--bob {
    @include hacks();

    @keyframes eui-anim--bob {
        0% {
            transform: translateY(-8px);
        }
        50% {
            transform: translateY(-4px);
        }
        100% {
            transform: translateY(-8px);
        }
    }
    @keyframes eui-anim--bob-float {
        100% {
            transform: translateY(-8px);
        }
    }

    &:hover,
    &:focus,
    &:active {
        animation-name: eui-anim--bob-float, eui-anim--bob;
        animation-duration: 0.3s, 1.5s;
        animation-delay: 0s, 0.3s;
        animation-timing-function: ease-out, ease-in-out;
        animation-iteration-count: 1, infinite;
        animation-fill-mode: forwards;
        animation-direction: normal, alternate;
	}
}
