.container1 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    animation-delay: 1s;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: rgba(255, 255, 255, 0);
    transition: all 200ms ease;
}

.po_ab {
    position: absolute;
}

.item-1 {
    width: 20px;
    height: 20px;
    background: #2f978f;
    border-radius: 50%;
    margin: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

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

    50%, 75% {
        transform: scale(2.5);
    }

    78%, 100% {
        opacity: 0;
    }
}

.item-1:before {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #99a6a5;
    opacity: 0.7;
    animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
    animation-delay: 200ms;
    transition: 0.5s all ease;
    transform: scale(1);
    z-index: 999;
}

.item-2 {
    width: 20px;
    height: 20px;
    background: #2f978f;
    border-radius: 50%;
    margin: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

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

    50%, 75% {
        transform: scale(2.5);
    }

    78%, 100% {
        opacity: 0;
    }
}

.item-2:before {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #99a6a5;
    opacity: 0.7;
    animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
    animation-delay: 400ms;
    transition: 0.5s all ease;
    transform: scale(1);
    z-index: 999;
}

.item-3 {
    width: 20px;
    height: 20px;
    background: #2f978f;
    border-radius: 50%;
    margin: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

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

    50%, 75% {
        transform: scale(2.5);
    }

    78%, 100% {
        opacity: 0;
    }
}

.item-3:before {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #99a6a5;
    opacity: 0.7;
    animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
    animation-delay: 600ms;
    transition: 0.5s all ease;
    transform: scale(1);
    z-index: 999;
}

.item-4 {
    width: 20px;
    height: 20px;
    background: #2f978f;
    border-radius: 50%;
    margin: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

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

    50%, 75% {
        transform: scale(2.5);
    }

    78%, 100% {
        opacity: 0;
    }
}

.item-4:before {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #162d2b;
    opacity: 0.7;
    animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
    animation-delay: 800ms;
    transition: 0.5s all ease;
    transform: scale(1);
    z-index: 999;
}

.item-5 {
    width: 20px;
    height: 20px;
    background: #2f978f;
    border-radius: 50%;
    margin: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

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

    50%, 75% {
        transform: scale(2.5);
    }

    78%, 100% {
        opacity: 0;
    }
}

.item-5:before {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #162d2b;
    opacity: 0.7;
    animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
    animation-delay: 1000ms;
    transition: 0.5s all ease;
    transform: scale(1);
    z-index: 999;
}

/*
    <div class="container1"><div class="item-1"></div><div class="item-2"></div><div class="item-3"></div><div class="item-4"></div><div class="item-5"></div></div>
*/