* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.demo-block {
    height: 300px;
    animation: bg-change 10s infinite;
}

.circle {
    position: relative;
    top: 50%;
    left: calc(50% - 5px);
    top: calc(50% - 5px);
    background: rgba(255, 255, 255, 0.5);
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.circle::before,
.circle::after {
    position: absolute;
    top: -25px;
    left: -25px;
    background: rgba(255, 255, 255, 1);
    width: 60px;
    height: 60px;
    content: "";
    display: block;
    border-radius: 50%;
    opacity: 0;
}

.circle::before {
    animation: bubble 6s infinite ease-out;
}

.circle::after {
    animation: bubble 6s 3s infinite ease-out;
}

@keyframes bubble {
    from {
        transform: scale(0);
        opacity: 0.8;
    }
    to {
        transform: scale(3);
        opacity: 0;
    }
}


@keyframes bg-change {
    0%, 100% {
        background: rgba(0, 0, 128, 0.4);
    }
    50% {
        background: rgba(0, 0, 128, 1);
    }

}