Using CSS Animation Keyframes for Bounce/Elastic Effects

Sometimes bezier curves are limited for CSS transitions so here's an example of using animation keyframes to get difficult to create transition effects.

HTML

<button>start</button>

<div class='container'>
    <div id='bounce'></div>
    <div id='elastic'></div>
</div>

CSS

.container {
    border: 1px solid black;
    height: 200px;
    margin: 20px auto;
    position: relative;
    width: 50%;
}

#bounce {
    animation-fill-mode: forwards;
    bottom: calc(100% - 20px);
    background-color: red;
    height: 20px;
    position: absolute;
    width: 20px;
}
.bounce {
    animation: bounce 1s;
}
@keyframes bounce {
    0% {
        bottom: calc(100% - 20px);
    }
    10% {
        bottom: 0%;
    }
    20% {
        bottom: 20%;
    }
    30% {
        bottom: 0%;
    }
    40% {
        bottom: 5%;
    }
    50% {
        bottom: 0%;
    }
    100% {
        bottom: 0%;
    }
}

#elastic {
    animation-fill-mode: forwards;
    bottom: calc(100% - 20px);
    background-color: red;
    height: 20px;
    left: 40px;
    position: absolute;
    width: 20px;
}
.elastic {
    animation: elastic 5s;
}
@keyframes elastic {
    0% {
        bottom: calc(100% - 20px);
    }
    20% {
        bottom: -20%;
    }
    40% {
        bottom: 5%;
    }
    60% {
        bottom: 0%;
    }
    100% {
        bottom: 0%;
    }
}

JavaScript

$('button').on('click', function () {
    var $this = $(this);
    $('#bounce').addClass('bounce');
    $('#elastic').addClass('elastic');
    $this.prop('disabled', true);
    
    window.setTimeout(function () {
        $('#bounce').removeClass('bounce');
        $('#elastic').removeClass('elastic');
        $this.prop('disabled', false);
    }, 5000);
});