<h3>Add a Delay</h3>
<div class="stage">
    <div class="box bounce-3"></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-3 {
        animation-name: bounce-3;
        animation-timing-function: ease;
    }
    @keyframes bounce-3 {
        0%   { transform: translateY(0); }
        30%  { transform: translateY(-100px); }
        50%  { transform: translateY(0); }
        100% { transform: translateY(0); }
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.