SOURCE

<div class="father">
    <div class="bubble"></div>
</div>

.bubble {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #FFC107;
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    animation: bubbleRising linear 3s infinite forwards alternate;
}

@keyframes bubbleRising {
    0% {
        bottom: 40px;
    }
    100% {
        bottom: 60px;
    }
}

.father {
    position: relative;
    width: 200px;
    height: 300px;
    background: black;
}