<h3>Add some curves!</h3>
<div class="stage">
    <div class="box bounce-7"></div>
</div>

    body {
        font: 1em sans-serif;
        text-align: center;
    }
    .stage {
        border-bottom: 3px solid #444;
        display: flex;
        height: 330px;
        width: 100%;
    }
    .box {
        align-self: flex-end;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        background-color: #F44336;
        height: 200px;
        margin: 0 auto 0 auto;
        transform-origin: bottom;
        width: 200px;
    }
    .bounce-7 {
        animation-name: bounce-7;
        animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
    }
    @keyframes bounce-7 {
        0%   { transform: scale(1,1)      translateY(0); }
        10%  { transform: scale(1.1,.9)   translateY(0); border-top-left-radius: 20px 100%; border-bottom-left-radius: 20px 100%; border-top-right-radius: 20px 100%; border-bottom-right-radius: 20px 100%; padding: 0 10px; }
        30%  { transform: scale(.9,1.1)   translateY(-100px); border-radius: 0; padding: 0; }
        50%  { transform: scale(1.05,.95) translateY(0); }
        57%  { transform: scale(1,1)      translateY(-7px); }
        64%  { transform: scale(1,1)      translateY(0); }
        100% { transform: scale(1,1)      translateY(0); }
    }