SOURCE

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

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

@keyframes bubbleRising {
    0% {
        bottom: -20px;
        opacity: 1;
    }
    50% {
        bottom: 100%;
        opacity: 0;
    }
    100% {
        bottom: 100%;
        opacity: 0;
    }
}

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