.keira_container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    white-space: nowrap;
}

.keira_circle {
    margin: 5px;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    display: inline-block;
    transform: scale(0);
    animation: bulge 1.5s infinite ease-in-out;
}

.keira_circle::after {
    position: absolute;
    display: inline-block;
    content: '';
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background-color: inherit;
    top: 0;
    left: 0;
    z-index: -1;
    transform: scale(1);
    animation: blow 2s infinite ease-in-out;
}

.keira_circle:nth-child(1) {
    background-color: #4695B8;
    animation-delay: 0s;
}

.keira_circle:nth-child(2) {
    background-color: #67A142;
    animation-delay: .1s;
}

.keira_circle:nth-child(3) {
    background-color: #8FC0A7;
    animation-delay: .2s;
}
.keira_circle:nth-child(4) {
    background-color: #949449;
    animation-delay: .3s;
}
.keira_circle:nth-child(5) {
    background-color: #B766AD;
    animation-delay: .4s;
}

@keyframes bulge {
    50% {
        transform: scale(1);
    }
}

@keyframes blow {
    25% {
        opacity: 0.5;
    }

    50% {
        opacity: 0.5;
    }

    90% {
        opacity: 0;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}