$props: '0%' 0 1 1 'ease-in', '7%' 5% 0.9 1.1 'ease-in',
    '25%' 100% 1.15 0.9 'ease-in', '50%' 200% 1 1 'none',
    '60%' 200% 0.4 1.6 'none', '65%' 200% 1 1 'ease-out',
    '100%' 0 1 1 'ease-out';

.ball {
    animation: bouncingBall 0.8s infinite;
}

@keyframes bouncingBall {
    @each $percent, $y, $scaleY, $scaleX, $easing in $props {
        #{$percent} {
            transform: translateY(#{$y}) scaleY(#{$scaleY}) scaleX(#{$scaleX});
            animation-timing-function: $easing;
        }
    }
}